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

29 июля 2021, 14:50

Есть скрипт

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

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

Answer 1

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

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>