注意：

Question

我想触发一次（并且只有一次）用户从顶部向下滚动100像素。

过去我得到了这段代码，但它似乎没有用？

window.onscroll = function() {
  var scrollLimit = 100;
  var scrollValue = document.body.scrollTop;
  if (scrollValue >= scrollLimit) {
    alert("x")
  }
};

Answer 1

试试这个：

var scrollValue = window.scrollY;

Answer 2

您在这里使用了错误的属性。

您需要使用 Window.scrollY 属性，而不是scrollTop属性。

这应该是你的代码：

window.onscroll = function() {
  var scrollLimit = 100;
  if (window.scrollY >= scrollLimit) {
    alert("x")
  }
};

注意：

与window.scrollY的 IE兼容性问题：

不幸的是window.scrollY无法使用IE浏览器，对于IE，您可以使用window.pageYOffset作为替代，但它始终会提供数百个舍入值(100, 200, 300, ...)。

否则，您可以查看accepted answer here使用document.documentElement.scrollTop作为解决方法。

Answer 3

scrollTop将为您提供元素顶部和文档顶部之间的偏移量。由于默认情况下html文档的正文从文档顶部开始，因此body.scrollTop始终保持为0，除非您专门使用css使主体不能从顶部开始。

因此，您必须使用scrollY代替scrollTop。如果您使用的浏览器不支持scrollY（例如IE），您可以尝试pageYOffset。

从顶部滚动x像素后触发功能

3 个答案:

注意：