当元素设置overflow-y:scroll和height:100vh时，如何实现滚动到底部？

当然可以实现滚动到底部！不过你原来的代码有个小问题——你操作的是window的滚动，而不是目标容器本身的滚动行为，这就导致代码没效果。下面我来详细拆解正确的实现方式：

当元素设置了height: 100vh和overflow-y: scroll后，它会成为一个独立的滚动容器，整个窗口的滚动逻辑和它无关，必须直接操作这个容器的滚动属性才能让它滚动。

1. 基础CSS（保持你的原有设置即可） #

#content {
  height: 100vh;
  overflow-y: scroll;
  /* 可选：加个边框让容器更明显 */
  border: 1px solid #eee;
}

2. 两种有效的JavaScript写法 #

方法一：直接设置scrollTop属性

这是最直接的方式，把容器的scrollTop值设为它的scrollHeight（容器内容的总高度）：

const content = document.getElementById('content');
// 瞬间滚动到底部
content.scrollTop = content.scrollHeight;

方法二：使用容器的scrollTo方法（支持平滑滚动）

如果想要更友好的平滑滚动效果，可以用元素自带的scrollTo方法，传入配置对象：

const content = document.getElementById('content');
content.scrollTo({
  top: content.scrollHeight,
  behavior: 'smooth' // 开启平滑滚动，去掉则是瞬间滚动
});

你原来的代码window.scrollTo(0, content.scrollHeight)之所以无效，是因为window.scrollTo控制的是整个浏览器窗口的滚动，而我们的目标是让#content这个容器内部滚动，两者是完全独立的滚动上下文，所以必须直接操作容器元素的滚动属性。

• 确保容器内的内容高度确实超过了100vh，否则不会出现滚动条，滚动操作也就没有意义
• 如果内容是动态加载的（比如从接口获取后插入），一定要等内容完全渲染完成后再执行滚动代码，否则scrollHeight会是不准确的初始值

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