如何使用 Vanilla Javascript 检测元素的 scrollTop？

Question

我想在用户从元素顶部滚动超过 100 像素时向该元素添加一个 class，但我似乎在页面加载后立即触发它。这是我现在的代码

const content = document.getElementById("content");
document.addEventListener("scroll", () => {
  content.classList.add(
    'curtain-in',
    content.scrollTop > 100
  );
});

还有你的回答，请你解释一下我哪里出错了。提前谢谢你

Answer 1

I want to add a class to an element when the user scrolls more than 100px from the top of the element

您应该将 addEventListener 添加到 content 而不是 document

const content = document.getElementById("content");
content.addEventListener("scroll", () => {
  console.log('class added');
  content.classList.add(
    'curtain-in',
    content.scrollTop >= 100
  );
});

#content {
  height: 200px;
  width: 200px;
  overflow: scroll;
}

p {
  height: 1000px;
}

<div id="content">
  <p></p>
</div>

Answer 2

也许正在发生的事情是 content.scrollTop 总是返回 0 而你的条件永远不会满足。我一直在努力解决这个问题，试图制作一个 fiddle 来测试你的案例。

要检查滚动是否已经超过元素的开头加上 100px，我们需要知道元素从哪里开始以及滚动的新位置，我们可以像这样获得这两个值：

var position = content.offsetTop;
var scrolled = document.scrollingElement.scrollTop;

有了这些，您可以在事件函数中执行类似这样的操作：

const content = document.getElementById("content");
document.addEventListener("scroll", (e) => {

  var scrolled = document.scrollingElement.scrollTop;
  var position = content.offsetTop;

  if(scrolled > position + 100){
    content.classList.add(
      'curtain-in');
    }
});

这是 fiddle：https://jsfiddle.net/cvmw3L1o/1/

如何使用 Vanilla Javascript 检测元素的 scrollTop？

How can I detect the scrollTop of an element using Vanilla Javascript?

javascript

addeventlistener

scrolltop