Question

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

现在，我只想在网页浏览器滚动条手动滚动页面时运行一些功能。为了澄清，应该从这个逻辑中排除通过鼠标滚轮或通过我自己的按钮滚动。

现在我有办法检测似乎有效的鼠标滚轮特定动作（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代码片段还是由浏览器自己的滚动条激活。例如，上面的代码可以通过代码滚动或者手动拖动浏览器滚动条来运行。有没有人有更好的策略来分离这三种不同事件的检测？

Answer 1

你可以试试这个：

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

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

Answer 2

您可以检测已启动事件的位置。如果你有：

<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);

您将看到，单击内容将生成“内容”，单击滚动条将生成“包装器”。

明确寻求在Javascript中查找是否可以通过单击滚动条来检测页面滚动

2 个答案: