Estoy usando el efecto animado scroll snap, pero a diferencia de usar la barra de desplazamiento cuando el evento de desplazamiento solo finaliza después de dejar que la barra de desplazamiento, cuando lo controlo con JS scroll (), completa la acción de desplazamiento cada vez que se activa el evento, lo que hace que la posición de desplazamiento sea siempre en puntos de ajuste, razón por la cual en este código de muestra los botones de desplazamiento no funcionan como la barra de desplazamiento cuando se mantienen presionados
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>