如何将div的水平自动滚动功能修改为垂直自动滚动？

1. 调整CSS属性 #

原CSS是为水平滚动配置的，需要修改两处：

• 将overflow-x: scroll替换为overflow-y: scroll，开启垂直滚动能力
• 删除white-space: nowrap属性，该属性是强制子元素水平不换行排列，垂直滚动不需要该配置

修改后CSS代码如下：

.container {
  height: 100px;
  overflow-y: scroll;
  background-color: #fff;
}

2. 调整JS滚动逻辑 #

原JS代码的scrollTo方法参数顺序为(水平偏移量, 垂直偏移量)，原逻辑是修改水平偏移实现横向滚动，现在需要改为修改垂直偏移：

• 修正边界判断逻辑：scrollTop的最大有效值为scrollHeight - clientHeight，直接判断等于scrollHeight会导致滚动到底部后仍重复触发逻辑
• 调整scrollTo的参数，固定水平偏移为0，垂直偏移累加1

修改后JS代码如下：

const flavoursContainer = document.getElementById('flavoursContainer');
const maxScrollTop = flavoursContainer.scrollHeight - flavoursContainer.clientHeight;

window.addEventListener('load', () => {
  setInterval(() => {
    if (flavoursContainer.scrollTop < maxScrollTop) {
      flavoursContainer.scrollTo(0, flavoursContainer.scrollTop + 1);
    }
  }, 15);
});

3. 可选扩展 #

如果需要实现滚动到底部后自动回到顶部循环滚动，可以把判断分支修改为：

if (flavoursContainer.scrollTop < maxScrollTop) {
  flavoursContainer.scrollTo(0, flavoursContainer.scrollTop + 1);
} else {
  flavoursContainer.scrollTo(0, 0);
}

HTML代码无需调整，修改完成后即可实现垂直方向的自动滚动效果。

内容的提问来源于stack exchange，提问作者uPong26