自动滚动 div

Question

我尝试自动滚动此 div 但我卡住了，因为我不能做我想做的事。这段代码是从 Whosebug 中检索到的，它通常应该水平移动。不过我的目标是让它垂直。

我该怎么做？

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>

Answer 1

您需要使用scrollTo(x, y)方法的第二个参数。

例如：

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

自动滚动 div

Auto Scroll in div

html

javascript

css

jquery

scroll