Скролл до конца

const slider = document.querySelector('#slider'),
  leftArrow = document.querySelector('#sliderLeftArrow'),
  rightArrow = document.querySelector('#sliderRightArrow'),
  scrollint = 200;

rightArrow.addEventListener('click', e => {
  slider.scrollLeft += scrollint;
});

leftArrow.addEventListener('click', e => {
  slider.scrollLeft -= scrollint;
});

slider.addEventListener('scroll', () => {
  if (this.scrollWidth === this.scrollLeft + this.clientWidth) {
    console.log(3)
  }
});

.slider {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  height: 350px;
  position: relative;
  text-align: center;
}

.slider .slides {
  display: grid;
  grid-auto-flow: column;
  overflow: scroll;
}

.slider .slides .slide {
  text-align: center;
  height: 100%;
}

.slider .slides .slide img {
  display: block;
  height: 355px;
}

.slider .arrow {
  position: absolute;
  border: none;
  background-color: transparent;
  cursor: pointer;
  outline: none;
}

.slider .arrow svg {
  width: 100px;
  fill: rgba(0, 0, 0, 0.8);
}

.slider .arrow.arrow-left {
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  left: -100px;
}

.slider .arrow.arrow-right {
  top: 50%;
  -webkit-transform: translate(0, -50%) rotate(180deg);
  transform: translate(0, -50%) rotate(180deg);
  right: -100px;
}

<div class="slider">
  <button class="arrow arrow-left" id="sliderLeftArrow"><?xml version="1.0" encoding="iso-8859-1"?>
                        <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
                        <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             width="306px" height="306px" viewBox="0 0 306 306" style="enable-background:new 0 0 306 306;" xml:space="preserve">
                        <g>
                            <g id="chevron-left">
                                <polygon points="247.35,35.7 211.65,0 58.65,153 211.65,306 247.35,270.3 130.05,153      "/>
                            </g>
                        </g>
                        <g>
                        </g>
                        <g>
                        </g>
                        <g>
                        </g>
                        <g>
                        </g>
                        <g>
                        </g>
                        <g>
                        </g>
                        <g>
                        </g>
                        <g>
                        </g>
                        <g>
                        </g>
                        <g>
                        </g>
                        <g>
                        </g>
                        <g>
                        </g>
                        <g>
                        </g>
                        <g>
                        </g>
                        <g>
                        </g>
                        </svg>
                        </button>
  <div class="slides" id="slider">
    <div class="slide"><img src="https://vignette.wikia.nocookie.net/the-long-dark/images/6/66/%D0%9F%D1%80%D0%BE%D1%81%D1%82%D0%BE_%D0%BB%D0%BE%D1%81%D1%8C.jpg/revision/latest?cb=20191214081501&path-prefix=ru"></div>
    <div class="slide"><img src="https://vignette.wikia.nocookie.net/the-long-dark/images/6/66/%D0%9F%D1%80%D0%BE%D1%81%D1%82%D0%BE_%D0%BB%D0%BE%D1%81%D1%8C.jpg/revision/latest?cb=20191214081501&path-prefix=ru"></div>
    <div class="slide"><img src="https://vignette.wikia.nocookie.net/the-long-dark/images/6/66/%D0%9F%D1%80%D0%BE%D1%81%D1%82%D0%BE_%D0%BB%D0%BE%D1%81%D1%8C.jpg/revision/latest?cb=20191214081501&path-prefix=ru"></div>
    <div class="slide"><img src="https://vignette.wikia.nocookie.net/the-long-dark/images/6/66/%D0%9F%D1%80%D0%BE%D1%81%D1%82%D0%BE_%D0%BB%D0%BE%D1%81%D1%8C.jpg/revision/latest?cb=20191214081501&path-prefix=ru"></div>
    <div class="slide"><img src="https://vignette.wikia.nocookie.net/the-long-dark/images/6/66/%D0%9F%D1%80%D0%BE%D1%81%D1%82%D0%BE_%D0%BB%D0%BE%D1%81%D1%8C.jpg/revision/latest?cb=20191214081501&path-prefix=ru"></div>
    <div class="slide"><img src="https://vignette.wikia.nocookie.net/the-long-dark/images/6/66/%D0%9F%D1%80%D0%BE%D1%81%D1%82%D0%BE_%D0%BB%D0%BE%D1%81%D1%8C.jpg/revision/latest?cb=20191214081501&path-prefix=ru"></div>
  </div>
  <button class="arrow arrow-right" id="sliderRightArrow"><?xml version="1.0" encoding="iso-8859-1"?>
                    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
                    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         width="306px" height="306px" viewBox="0 0 306 306" style="enable-background:new 0 0 306 306;" xml:space="preserve">
                    <g>
                        <g id="chevron-left">
                            <polygon points="247.35,35.7 211.65,0 58.65,153 211.65,306 247.35,270.3 130.05,153      "/>
                        </g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    </svg>
                    </button>
</div>