在div.中自动滚动

Question

我试图自动滚动这个div，但我被卡住了，因为我不能做我想做的事。这个片段是从Stackoverflow中检索到的，它通常应该水平移动。然而，我的目标是垂直。

我该怎么做？

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);