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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You need to use the second parameter of the scrollTo(x, y) method.

For example:

flavoursContainer.scrollTo(0, flavoursContainer.scrollTop   1);