У меня есть блок (div), у него есть вертикальная полоса прокрутки, как сделать так, чтобы при скроллинге блока, сам скроллинг шёл плавно, при этом безо всяких якорей. То есть я поворачиваю колёсико вниз а страница плавно прокручивается.
2
-
Ваш вопрос про снижение скорости прокрутки повторяется с #359616 – Denis Pupyrev 1 мар '19 в 16:53
-
@DenisPupyrev, вроде не похоже. Впрочем, интересный вопрос - ответил там. – Qwertiy♦ 1 мар '19 в 20:06
добавить комментарий
|
1 ответ
let box = document.querySelector(".customScrollBox");
box.addEventListener("wheel", event => {
let dir = event.deltaY > -1,
road = box.scrollHeight - box.offsetHeight,
scrollTop = box.scrollTop;
if ((dir && road == scrollTop) || (!dir && scrollTop == 0)) {
return
}
event.preventDefault();
let step = box.scrollHeight / 100 * 10,
speed = 4;
for (let i = 0; i <= step; i++) {
setTimeout(()=>dir ? box.scrollTop++ : box.scrollTop--, speed * i);
}
})
.customScrollBox {
overflow: hidden;
height: 180px;
width: 200px;
background-color: red;
}
.customScrollBox > div {
height: 160px;
width: 100%;
margin: auto;
background-color: green;
}
.customScrollBox > div:nth-child(2n) {
background-color: blue;
}
<div class="customScrollBox">
<div></div>
<div></div>
<div></div>
<div></div>
</div>