Блог

Главная - Вопросы по программированию - Создание эффекта плавной прокрутки

Создание эффекта плавной прокрутки

#javascript #smooth-scrolling

#javascript #плавная прокрутка

Вопрос:

У меня есть код для горизонтальной прокрутки содержимого, он работает, но всякий раз, когда он прокручивается, он прокручивает элементы один за другим, как разрыв, поэтому я хочу, чтобы он прокручивался плавно, вот пример кода ниже, пожалуйста, мне нужна помощь с этим

  <style>
.child {
  width: 100px;
  white-space: nowrap;
  overflow-x: scroll;
}
</style>

<script>
(function(w){
    w.addEventListener('load', function(){
        const   btn_left = document.getElementById('btn-left'),
                btn_right = document.getElementById('btn-right'),
                content = document.getElementById('con');
        const content_scroll_width = content.scrollWidth;
        let content_scoll_left = content.scrollLeft;
        btn_right.addEventListener('click', () => {
            content_scoll_left  = 100;
            if (content_scoll_left >= content_scroll_width) { content_scoll_left = content_scroll_width; }
            content.scrollLeft = content_scoll_left;
        });
        btn_left.addEventListener('click', () => {
            content_scoll_left -= 100;
            if (content_scoll_left <= 0) {
                content_scoll_left = 0;
            }
            content.scrollLeft = content_scoll_left;
        });
    });
})(window);
</script>

<div class="parent">
     <div class="child" id="con">
                Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
                Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
                Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
                Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
                Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
                Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
                Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
                Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
                Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
    </div>
</div>
<button id="btn-left">Left scroll</button>
<button id="btn-right">Right scroll</button>

Комментарии:

1. используйте scroll-behaviour: smooth правило css. Это может не повлиять на старые браузеры, но кого это волнует, это не функционально важная функция

2. Я сделал это, и это сработало

Ответ №1:

Может быть, вы можете попробовать scroll-behavior: smooth в своем css-файле. Вот пример.

Или, если вы хотите сделать это с помощью JavaScript, попробуйте

 window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth'
});