He escrito el siguiente código para desplazar un elemento 20 píxeles más a la derecha.
const button = document.getElementById('slide'); button.onclick = function () { document.getElementById('container').scrollLeft += 20; }; ¿Cómo puedo hacer que el desplazamiento sea suave? He intentado usar Element#scroll así:
const button = document.getElementById('slide'); button.onclick = function () { document.getElementById('container').scroll({ left: += 20, behavior: smooth }); };¿Soy capaz de hacer esto?
Puede usar Element#scrollBy para desplazarse una cierta cantidad desde la posición actual.
button.onclick = function () { document.getElementById('container').scrollBy({ left: 20, behavior: 'smooth' }); };¿Es esto lo que estás buscando?
Desde MDN:
scrollBy()desplaza por una cantidad particular, mientras quescroll()se desplaza a una posición absoluta en el documento.
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy
const container = document.querySelector("#container"); const button = document.querySelector("#btnScroll"); button.addEventListener('click', e => { container.scrollBy({ left: 200, behavior: 'smooth' }); }); #container { position: relative; max-width: 200px; overflow-x: scroll; display: flex; margin: 20px; } img { display: inline-block } <div id="container"> <img src="https://dummyimage.com/200x100/000/fff"> <img src="https://dummyimage.com/200x100/0f0/000"> <img src="https://dummyimage.com/200x100/00f/fff"> <img src="https://dummyimage.com/200x100/f00/fff"> </div> <button id="btnScroll">Scroll 200px</button>