当用户从元素顶部滚动超过100px时,我想为元素添加一个类,但是我似乎在页面加载后立即触发它。这是我目前的代码
G9
还有你的答案,请你解释我哪里出错了。 提前谢谢
答案 0 :(得分:2)
可能发生的事情是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');
}
});
答案 1 :(得分:1)
当用户滚动时,我想将一个类添加到元素 来自元素顶部
的100px
您应该将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>
&#13;