允许指针（单击）事件通过元素，同时保持滚动功能

本文介绍了允许指针（单击）事件通过元素，同时保持滚动功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我的目标是拥有一个允许以下内容的元素：My goal is to have an element which allows: 下面的元素被点击/与之互动， 滚动众所周知，1的解决方案是指针 - 事件：无。这与点击DIV到底层元素中所述。The solution to 1 is widely known to be pointer-events: none. This is as described in Click through a DIV to underlying elements.但是，元素无法滚动，因为滚动条出现在元素上 pointer-events：none 。这可以在这个例子中看到： http://jsbin.com/madure/ 2 /编辑？html，css，输出。However, the element can not be scrolled, because the scroll bar appears on the element with pointer-events: none. This can be seen in this example: http://jsbin.com/madure/2/edit?html,css,output.是否有针对此的解决方法，或者是否需要在浏览器级别解决？也许有一个额外的规则，指针事件：scrollOnly 。Is there a workaround to this, or is it something that would need to be addressed at the browser level? Perhaps with an additional rule, pointer-events: scrollOnly.推荐答案所以基本上如果你让上层不敏感点击它就会这样对于车轮事件也是如此我建议两件事情So basically if you make the upper layer insensitive for click it will be so for wheel events too. I suggest on of two things JavaScript解决方法： 基本上使用的事实是：JavaScript workaround:Which basically use the fact that:$(function(){$("#stage-layer").on("wheel",function(e){eo=e.originalEvent;s=$("#scrollable")switch(eo.deltaMode){case 0: //DOM_DELTA_PIXELChromes.scrollTop(eo.deltaY+s.scrollTop())s.scrollLeft(eo.deltaX+s.scrollLeft())break;case 1: //DOM_DELTA_LINEFirefoxs.scrollTop(15*eo.deltaY+s.scrollTop())//scroll(e.deltaX, e.deltaY); Just a random small amount of scrollings.scrollLeft(15*eo.deltaX+s.scrollLeft())break;case 2: //DOM_DELTA_PAGEs.scrollTop(0.03*eo.deltaY+s.scrollTop())s.scrollLeft(0.03*eo.deltaX+s.scrollLeft())break;}e.stopPropagation();e.preventDefault()})}).container { position: relative; width: 400px; height: 400px; border: 2px solid black;}#stage-layer { position: absolute; width: 100%; box-sizing: border-box; height: 100%; border: 2px solid yellow;}#application-layer { position: relative; box-sizing: border-box; height: 100%; border: 2px solid pink; pointer-events: none;}rect:hover { fill: blue;}#scrollable { overflow: auto; color: hotpink; height: 100px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <svg id="stage-layer"> <rect width="200" height="200"></rect> </svg> <div id="application-layer"> <div id="scrollable"> <p>foo1</p> <p>foo2</p> <p>foo3</p> <p>foo4</p> <p>foo5</p> <p>foo6</p> </div> </div> </div> 一个不错的提示：这可能不会立即产生解决方案，但它是长期网站开发的不错选择：This will not probably yield an immediate solution but it is a good choice for long term web development : 来源：指针事件Source : pointer-events 这篇关于允许指针（单击）事件通过元素，同时保持滚动功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！