I try to auto scroll this div but I’m stuck because I can’t do what I want.
This snippet was retrieved from Stackoverflow and it should normally move horizontally. However my goal to make it vertically.
How do I do it?
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>
>Solution :
You need to use the second parameter of the scrollTo(x, y) method.
For example:
flavoursContainer.scrollTo(0, flavoursContainer.scrollTop + 1);