如何检查滚动是否低于某个级别？答案

【问题标题】：How to check if scroll goes below some level?如何检查滚动是否低于某个级别？
【发布时间】：2021-03-28 19:21:42
【问题描述】：

我需要做这样的事情-> 如果滚动低于 200 像素，请将页面颜色更改为红色。如果超过 200 像素，则将其更改为白色。我怎样才能做到这一点？

const event11 = window.addEventListener('wheel', function(e) {
  console.log(e);
  console.log(window.innerHeight);
  if(e.pageY < (window.innerHeight - 200)) {
     document.body.style.backgroundColor = "red";
  } else {
    document.body.style.backgroundColor = "white";
  }
});

【问题讨论】：

任何代码尝试？
垃圾邮件标签没有帮助。
动摇了，解决方案应该作为“答案”发布。
我添加了有问题的代码尝试
注意，您可以通过多种方式滚动，而不仅仅是鼠标滚轮。

标签： javascript

【解决方案1】：

您可以通过window.pageYOffset || document.documentElement.scrollTop; 找到scroll position。用它与您的预期身高 200 进行比较。

同时使用scroll 事件而不是wheel，因为wheel 事件只会在鼠标滚轮滚动时触发。如果有人用拖动滚动条滚动页面，那么它将不起作用。所以使用scroll 事件，它也适用于这些情况。

添加window.dispatchEvent(new CustomEvent('scroll'));，这样一开始它将触发scroll 事件并设置适当的背景颜色。

参考：1.JavaScript get window X/Y position for scroll

How to trigger an on scroll event without scrolling

在下面试试。

window.addEventListener('scroll', function(e) {
  var top = window.pageYOffset || document.documentElement.scrollTop;
  if (top < 200) {
    document.body.style.backgroundColor = "red";
  } else {
    document.body.style.backgroundColor = "white";
  }
});

// trigger scroll event when page loads.
window.dispatchEvent(new CustomEvent('scroll'));

<div style="height:1000px;">
</div>

【讨论】：

【解决方案2】：

您也可以使用纯 JavaScript scrollY & scrollX 属性来实现滚动位置。

备注

pageXOffset 属性是 scrollX 属性的别名，而 pageYOffset 属性是 scrollY 属性的别名

Codepen 示例：https://codepen.io/cursorrux/pen/VwKWeRL

下面是scroll事件监听器的相同效果示例：

const event11 = window.addEventListener('scroll', function(e) {
  if(this.scrollY < 200) {
     document.body.style.backgroundColor = "white";
  } else {
    document.body.style.backgroundColor = "red";
  }
});

body {
  min-height: 500px;
}

<html>
  <body>
    
  </body>
</html>

【讨论】：

【解决方案3】：

DOM 树中有一个属性可以显示滚动的当前 Y 位置，称为document.scrollingElement.scrollTop。

const event11 = window.addEventListener('wheel', function(e) {
  
  if(document.scrollingElement.scrollTop > 200) {
     document.body.style.backgroundColor = "red";
  } else {
    document.body.style.backgroundColor = "white";
  }
});

【讨论】：