如何垂直自动滚动？

Question

此脚本运行良好，但我想将其调整为垂直滚动而不是水平滚动。我尝试将所有的 scrollLeft 更改为 scrollTop，将 ScrollWidth 更改为 ScrollHeight，并将 overflow-x 更改为 overflow-y，但没有任何成功。非常感谢任何帮助。

const flavoursContainer = document.getElementById("flavoursContainer");
const flavoursScrollWidth = flavoursContainer.scrollWidth;
let speed = 1;

window.addEventListener("load", () => {
  self.setInterval(() => {
    if (flavoursContainer.scrollLeft !== flavoursScrollWidth) {
      flavoursContainer.scrollTo(flavoursContainer.scrollLeft + speed, 0);
    }
  }, 17);
});

function myFunction() {
  flavoursContainer.scrollLeft = 0;
  document.getElementById("the-numbers").innerHTML =
    "25 50 75 100 125 150 175 200";
}

function test() {
  flavoursContainer.scrollLeft = 0;
  document.getElementById("the-numbers").innerHTML =
    "11 21 31 41 51 61 71 81 91 101";
}

function increaseSpeed() {
  speed++;
}

function decreaseSpeed() {
  if (speed > 1) {
    speed--;
  }
}

body {
  padding: 40px;
  font-size: 30px;
  line-height: 2em;
}

.container {
  width: 150px;
  overflow-x: scroll;
  white-space: nowrap;
  word-spacing: 30px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
</head>

<body>
  <div class="container" id="flavoursContainer">
    <div id="the-numbers">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15</div>
  </div>
  <div onclick="myFunction()">Change</div>
  <div onclick="test()">Change again</div>
  <button onclick="decreaseSpeed()">-</button>
  <button onclick="increaseSpeed()">+</button>
</body>

</html>

Answer 1

https://jsfiddle.net/tvibhu12/ufwxy2m6/

您可以更改 css 属性 display:flex 和 flex-direction:column

Answer 2

我已经开始工作了：

const flavoursContainer = document.getElementById("flavoursContainer");
const flavoursScrollHeight = flavoursContainer.scrollHeight;
let speed = 1;

window.addEventListener("load", () => {
  self.setInterval(() => {
    if (flavoursContainer.scrollTop !== flavoursScrollHeight) {
      flavoursContainer.scrollTo(0, flavoursContainer.scrollTop + speed);
    }
  }, 17);
});

function myFunction() {
  flavoursContainer.scrollTop = 0;
  document.getElementById("the-numbers").innerHTML =
    "25 50 75 100 125 150 175 200";
}

function test() {
  flavoursContainer.scrollTop = 0;
  document.getElementById("the-numbers").innerHTML =
    "11 21 31 41 51 61 71 81 91 101";
}

function increaseSpeed() {
  speed++;
}

function decreaseSpeed() {
  if (speed > 1) {
    speed--;
  }
}

body {
  padding: 40px;
  font-size: 30px;
  line-height: 2em;
}

.container {
  width: 50px;
  height: 100px;
  overflow-y: scroll;
  word-spacing: 30px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
</head>

<body>
  <div class="container" id="flavoursContainer">
    <div id="the-numbers">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15</div>
  </div>
  <div onclick="myFunction()">Change</div>
  <div onclick="test()">Change again</div>
  <button onclick="decreaseSpeed()">-</button>
  <button onclick="increaseSpeed()">+</button>
</body>

</html>

我已将 Javascript 措辞更改为垂直措辞（宽度到高度，从左到上）并将 flavoursContainer.scrollTo(flavoursContainer.scrollTop + speed, 0) 更改为 flavoursContainer.scrollTo(0, flavoursContainer.scrollTop + speed)（注意 x 和 y 已切换） .我还为 .container 添加了宽度和高度。我将 autoscroll-x 更改为 autoscroll-y 并删除了 white-space: nowrap;.

我也建议像这样使用 scrollTo:

element.scrollTo({
  top: flavoursContainer.scrollTo(0, flavoursContainer.scrollTop + speed),
  left: 0, // You might be able to remove this, I'm not sure
  behavior: 'smooth' // This will make it look nicer
});

并不是每个人都默认使用平滑滚动，因此如果不将其设置为平滑，它可能看起来很慢。 Read more about scrollTo Options (MDN)。请注意，Safari 不支持这些选项。 Internet Explorer 不支持任何形式的 scrollTo。（截至 2020 年 7 月 18 日）

如何垂直自动滚动？

How do I autoscroll vertically?

javascript

autoscroll