最终任务，如果可能的话，在Javascript中查找，通过单击滚动条来检测页面滚动

Definitive quest to find if possible in Javascript to detect page scrolling by clicking on scroll bars

本文关键字：单击 滚动条 检测 滚动 查找 Javascript 如果 任务      更新时间：2023-09-26

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

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

现在我有一种方法可以检测似乎有效的鼠标滚轮特定动作（从这里开始）......

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 代码段还是由浏览器自己的滚动条激活来区分页面内容滚动。 例如，上面的代码要么通过代码滚动运行，要么手动拖动浏览器滚动条。 有没有人有更好的策略来分离这三个不同事件的检测？

你可以试试这个：

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

如果它没有与 JavaScript 发起的滚动区分开来，您可以尝试标记变量以检测它是否是 javascript 发起的滚动并有条件地执行函数代码。

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

<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);
您将看到，单击内容将生成"

内容"，单击滚动条将生成"包装器"。

相关文章：