Как сделать плавный скролл внутри блока?

203

06 октября 2018, 18:50

Есть готовый код который при нажатии на кнопки скроллит содержимое внутри блока (На чистом js). Необходимо сделать при клике плавную прокрутку содержимого средством чистого js, либо js + jquery (ваш код).

var scroll = document.getElementById('scroll'), 
		prev = document.getElementById('prev'), 
		next = document.getElementById('next'); 
 
prev.addEventListener('click', function() { 
	scroll.scrollBy(-300,0); 
}, true); 
next.addEventListener('click', function() { 
	scroll.scrollBy(300,0); 
}, true);

#scroll { 
  overflow: auto; 
  width: 100px; 
  height: 100px; 
   
}

<div id="scroll"> 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
</div> 
<div id="prev">Назад</div> 
<div id="next">Вперед</div>

Answer 1

var scroll = document.getElementById('scroll'), 
		prev = document.getElementById('prev'), 
		next = document.getElementById('next'); 
 
prev.addEventListener('click', function() { 
	scroll.scrollBy({left:-300, top:0, behavior:"smooth"}); 
}, true); 
next.addEventListener('click', function() { 
	scroll.scrollBy({left:300, top:0, behavior:"smooth"}); 
}, true);

#scroll { 
  overflow: auto; 
  width: 100px; 
  height: 100px; 
   
}

<div id="scroll"> 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
</div> 
<div id="prev">Назад</div> 
<div id="next">Вперед</div>

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Что делать с SEO в SPA приложении?

На текущий момент есть блог в виде Rails приложенияСтраницы проиндексированы поисковиками

188

javascript

Расчёт стоимости

Есть скрипт (ниже), который должен по задумке на состояние checkbox - checked записывать value этого checkbox(их много) в массив, делать тоже самое с другим...

176

javascript