0

Есть скрипт

$('#prev').on('click', function(){
  var block = document.getElementById("container555");

  block.scrollTop -= 300;

});
$('#next').on('click', function(){
  var block = document.getElementById("container555");

  block.scrollTop += 300;
});

Подскажите, как добавить плавность скроллу, что бы не было рывков при скролле.

1 ответ 1

0

Вот такой вариант

let container = $('#container555'), // элемент который будем скроллить
    scrolling = 300, // "расстояние" скролла
    scrollCheck = 0; // "защита" от нескольких нажатий

if(scrollCheck === 0) $('#prev, #next').on('click', function(){// обработчик на кнопки | не будем выполнять, если "защита" включена
  let id = $(this).attr('id'), // получим ид нажатой кнопки
      thisScroll = container.scrollTop(); // получим текущую позицию сколла в элементе
  
    scrollCheck = 1; // включим "защиту"
    
    let scroll = id === 'prev' ? thisScroll - scrolling : thisScroll + scrolling;
    
    container.animate({ // выполняем "плавный" скролл
      scrollTop: scroll
    }, 'slow', function(){ // по завершению анимации..
      scrollCheck = 0; // выключаем "защиту"
    });
});
#container555 {
  width: 400px;
  height: 200px;
  border: 1px solid #666;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden auto;
}

.elem {
  height: 300px;
  background: red;
}

.elem:nth-child(odd) {
  background: blue;
}

#prev, #next {
  display: inline-block;
  background: #ccc;
  padding: 2px 4px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container555">
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
</div>
<div id="prev">prev</div>
<div id="next">next</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.