БЛОГ НА HUSL


Плавный скролл с scrollLeft

Автор вопроса: Voprositel

Написал простой слайдер и появилось желание сделать его плавным. Видел на jsFiddle пример плавного слайдера с scrollLeft, но это было давно, я тогда плохо разбирался в js, а код вообще был на jQuery.

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 {
  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: hidden;
}

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

.slider .slides .slide img {
  display: block;
  width: 400px;
}

.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>

upd:

Тот самый пример с jsFiddle

Он мне не подходит, потому что скролл поблочный, а не интервальный, как у меня + я абсолютно не понимаю jQuery.


Источник

Ответы (1 шт):

Автор решения: Sergei Kirjanov 

<style>
.slider .slides {
    display: grid;
    grid-auto-flow: column;
    overflow: hidden;
}

.slider .slides .slide img {
    width: 400px;
}
</style>
<div class="slider">
    <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 id="sliderLeftArrow">ТУДА</button>
    <button id="sliderRightArrow">СЮДА</button>
</div>
<script>

const slide = (slider,step,period) => () => {
    const startTime = Date.now()
    const startLeft = slider.scrollLeft
    const render = () => {
        const dt = Date.now() - startTime
        if(dt < period){
            slider.scrollLeft = startLeft + step * dt / period 
            requestAnimationFrame(render)
        }
    }
    requestAnimationFrame(render)
}

(()=>{
    const slider = document.querySelector('#slider')
    document.querySelector('#sliderRightArrow').addEventListener('click', slide(slider,200,200))
    document.querySelector('#sliderLeftArrow').addEventListener('click', slide(slider,-200,200))
})()
</script>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.