Question

当用户从元素顶部滚动超过100px时，我想为元素添加一个类，但是我似乎在页面加载后立即触发它。这是我目前的代码

G9

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

Answer 1

可能发生的事情是content.scrollTop始终返回0并且您的情况永远不会实现。我一直在努力解决这个问题，试图用一个小提琴来测试你的情况。

要检查滚动是否已经通过元素的开头加上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');
    }
});

这是小提琴：https://jsfiddle.net/cvmw3L1o/1/

Answer 2

当用户滚动时，我想将一个类添加到元素来自元素顶部
的100px

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: