Intento desplazar automáticamente este div pero estoy atascado porque no puedo hacer lo que quiero. Este fragmento se recuperó de Stackoverflow y normalmente debería moverse horizontalmente. Sin embargo, mi objetivo es hacerlo verticalmente.
¿Cómo lo hago?
const flavoursContainer = document.getElementById('flavoursContainer'); const flavoursScrollHeight = flavoursContainer.scrollHeight; window.addEventListener('load', () => { self.setInterval(() => { if (flavoursContainer.scrollTop !== flavoursScrollHeight) { flavoursContainer.scrollTo(flavoursContainer.scrollTop + 1, 0); } }, 15); });
.container { height: 100px; overflow-x: scroll; white-space: nowrap; background-color: #fff; }
<div class="container" id="flavoursContainer"> <div class="element">test</div> <div class="element">test</div> <div class="element">test</div> <div class="element">test</div> <div class="element">test</div> <div class="element">test</div> <div class="element">test</div> <div class="element">test</div> <div class="element">test</div> </div>
Debe utilizar el segundo parámetro del método scrollTo(x, y)
.
Por ejemplo:
flavoursContainer.scrollTo(0, flavoursContainer.scrollTop + 1);