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

时间:2018-05-20 05:17:20

标签: javascript addeventlistener scrolltop

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

G9

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

2 个答案:

答案 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');
    }
});

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

答案 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;
&#13;
&#13;