I'm using scroll snap animated effect but unlike using the scrollbar when the scroll event only finishes after letting the scrollbar, when I control it with JS scroll() it completes the scroll action every time the event is fired which causes scroll position to be always at snap points, which is why in this sample code the scroll buttons doesn't work like the scrollbar when held
const container = document.querySelector('.container')
const child = document.querySelector('.child')
const upBtn = document.querySelector('.up')
const downBtn = document.querySelector('.down')
upBtn.addEventListener('mousedown', movescrollup)
let Interval
function movescrollup() {
Interval = setInterval(() => {
container.scroll({
top: container.scrollTop - 20,
behavior: 'smooth'
})
}, 300)
}
upBtn.addEventListener('mouseup', stopscrollup)
function stopscrollup() {
clearInterval(Interval);
}
downBtn.addEventListener('mousedown', movescrolldown)
function movescrolldown() {
Interval = setInterval(() => {
container.scroll({
top: container.scrollTop + 20,
behavior: 'smooth'
})
}, 300)
}
downBtn.addEventListener('mouseup', stopscrolldown)
function stopscrolldown() {
clearInterval(Interval);
}.container {
display: flex;
flex-direction: column;
align-items: center;
width: 400px;
background-color: black;
height: 200px;
margin: auto;
overflow-y: scroll;
overflow-x: hidden;
scroll-behabior: smooth;
scroll-snap-type: y mandatory;
}
.child {
background-color: gray;
border: 4px solid blue;
min-width: 300px;
min-height: 150px;
scroll-snap-align: start;
}
.manual-scroll {
width: 200px;
margin: 50px auto;
}<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="manual-scroll">
<button class="up">Sroll Up</button>
<button class="down">Sroll Down</button>
</div>