确定是否可以在 Javascript 中通过单击滚动条来检测页面滚动答案

【问题标题】：Definitive quest to find if possible in Javascript to detect page scrolling by clicking on scroll bars确定是否可以在 Javascript 中通过单击滚动条来检测页面滚动
【发布时间】：2015-03-04 01:49:09
【问题描述】：

我有一个页面，用户可以通过我在页面中创建的按钮向上和向下滚动。它通过使用 jQuery 中的 animate 函数在页面中的锚点之间跳转来实现这一点。

现在我有一些功能，我只想在网页由 Web 浏览器滚动条手动滚动时运行。澄清一下，通过鼠标滚轮或我自己的按钮滚动应该被排除在这个逻辑之外。

现在我有一种方法可以检测似乎有效的鼠标滚轮特定操作 (taken from here)...

var isMouseScroll = false;

window.addEventListener('wheel',function(e){
  console.log('mouse wheel');
  isMouseScroll = true;
});

window.addEventListener('scroll',function(e){
  if(!isMouseScroll) {
    console.log('scroll');
  }

  isMouseScroll = false;
});

但我不知道如何区分页面内容滚动，具体取决于它是由一段 javascript 代码还是由浏览器自己的滚动条激活的。例如，上面的代码在通过代码滚动或我手动拖动浏览器滚动条时运行。有没有人有更好的策略来分开检测这三个不同的事件？

【问题讨论】：

标签： javascript jquery scroll

【解决方案1】：

您可以检测到事件的发起位置。如果你有：

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

风格的 f.e.作为

#wrapper {
  width: 320px;
  height: 320px;
  overflow: scroll;
}
#content {
  width: 800px;
  height: 800px;
  background-color: yellow;
}

比试试这个 javascript:

function init () {
  document.getElementById("wrapper").addEventListener("mousedown", mousedown);
}

function mousedown (e) {
  console.log(e.target.id);
}

window.addEventListener("load", init);

你会看到，点击内容会产生“内容”，点击滚动条会产生“包装”。

【讨论】：

【解决方案2】：

你可以试试这个：

window.onscroll = function (event) {
  // called when the window is scrolled.
}

如果它与 JavaScript 启动的滚动没有区别，您可以尝试在变量上标记以检测它是否是 javascript 启动的滚动并有条件地执行功能代码。

【讨论】：