JavaScript 可以捕获滚动事件，但让点击通过吗？答案

【问题标题】：Can JavaScript capture scroll events, but let clicks pass through?JavaScript 可以捕获滚动事件，但让点击通过吗？
【发布时间】：2017-06-16 10:05:41
【问题描述】：

我在这里有一个设置，但意识到用户必须能够与透明滚动捕获后面的层进行交互：

http://jsbin.com/huxasup/4/edit?html,css,js,console,output

scrollerCapture = document.querySelector('.scroller-capture');
scrollerCapture.addEventListener('scroll', e => {
    e.preventDefault();
    console.log(scrollerCapture.scrollTop);
});

有人知道执行此操作的标准方法吗？我应该使用 iScroll 或 ScrollMagic 之类的实用程序在移动设备上获得这种效果吗？

谢谢

【问题讨论】：

重复stackoverflow.com/questions/16877880/…
捕获滚动事件应该与点击事件无关。事件传播将使点击事件从被点击的东西冒泡到窗口。
没有简单的解决方案。最好的方法可能是重建您的标记，以便它不是滚动容器，而是一个更高的容器，它将包含背景和滚动条。然后你必须使背景变粘。
是的，我正在考虑将背景附加到窗口，就像这个人的网站rleonardi.com/interactive-resume

标签： javascript html css scroll

【解决方案1】：

在您的<div> 标签中提及onscroll 事件。比如

<div id="someID" onscroll="someFunction();">

然后在您相应的html 文件中执行以下操作

<script>
function someFunction() {
        //work done when scroll is detected
    };
</script>

谢谢。我希望这会有所帮助。

【讨论】：

我认为这行不通。与document.createElement('div').onscroll 相同，对吗？我正在监听 JavaScript 中的“滚动”事件。我会建议研究 Kapeli Dash，它就像是编码员的字典

【解决方案2】：

你可以使用

elementFromPoint()

在特定鼠标坐标处查找 DOM。

返回的 Document 接口的 elementFromPoint() 方法指定坐标处的最顶部元素。 https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint

找到 DOM 元素后，点击即可执行。

element.click();

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

快速示例：

document.addEventListener('click', e => {
  var dom = document.elementFromPoint(e.pageX, e.pageY);
  dom.click();
})

也许你感兴趣，有一个 CSS 属性叫做：

pointer-events: none;

允许鼠标事件通过。

CSS 属性 pointer-events 允许作者控制在什么情况下情况（如果有的话）一个特定的图形元素可以成为鼠标事件的目标。

除了表明该元素不是鼠标的目标事件，值 none 指示鼠标事件“通过” 元素并以该元素“下方”的任何内容为目标。 https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

【讨论】：

我似乎仍然无法突出显示文本或按下按钮
但是滚动被禁用了。
抱歉 nitpick :/ Element.click 仅适用于按钮或锚点，没有 MouseEvent 传递给它（无法从事件侦听器获取鼠标坐标）并实现拖动（或选择-text) 函数，会很难。可能更容易使用pointer-events:none 并监听鼠标滚轮事件，然后如果我们在滚动区域的顶部，请滚动它。