如何用Vanilla JavaScript检测元素scrollTop？代码触发异常排查

咱们先聊聊你代码里的几个问题，这就是为啥页面一加载就触发添加类的原因：

• classList.add的用法错误：classList.add()只接受类名字符串作为参数，你写的content.classList.add( 'curtain-in', content.scrollTop > 100 )其实是把'curtain-in'和布尔值（转成字符串'true'或'false'）都当成类名添加了，不管滚动距离多少，'curtain-in'都会被直接加上，这就是页面一加载就有这个类的原因。

• 监听了错误的滚动事件：你监听的是document的滚动事件，但你要判断的是content这个元素自身的scrollTop，如果content是一个可滚动的容器（比如设置了overflow: auto），那应该监听content自己的scroll事件，而不是整个文档的。

接下来分两种场景给你修正后的代码：

场景1：content是自带滚动条的容器 #

如果content是一个内部可滚动的元素（比如设置了overflow: auto且内容超出容器高度），那我们需要监听它自身的滚动事件，判断它的scrollTop值：

const content = document.getElementById("content");

// 监听content自身的滚动事件
content.addEventListener("scroll", () => {
  // 滚动距离超过100px时添加类，否则移除
  if (content.scrollTop > 100) {
    content.classList.add('curtain-in');
  } else {
    content.classList.remove('curtain-in');
  }
});

想要更简洁的写法，可以用classList.toggle()的第二个参数（布尔值）来控制类的添加/移除：

const content = document.getElementById("content");

content.addEventListener("scroll", () => {
  // 第二个参数为true时添加类，false时移除
  content.classList.toggle('curtain-in', content.scrollTop > 100);
});

场景2：滚动的是整个页面（window） #

如果你的需求是当整个页面滚动超过100px时，给content元素添加类，那应该用window.scrollY（或document.documentElement.scrollTop）来判断页面的滚动距离，而不是content的scrollTop：

const content = document.getElementById("content");

// 监听窗口的滚动事件
window.addEventListener("scroll", () => {
  content.classList.toggle('curtain-in', window.scrollY > 100);
});

最后再补充个知识点：scrollTop是针对可滚动元素自身的滚动距离，只有当元素设置了overflow: auto/scroll且内容超出容器时，这个值才会大于0；而window.scrollY是整个页面的垂直滚动距离。

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