允许指针(单击)事件通过元素,同时保持滚动功能

Question

我的目标是拥有一个允许的元素:

1. 下面的元素被点击/与之交互,
2. 滚动

众所周知,1的解决方案是pointer-events: none.这是在点击DIV到底层元素中所描述的.

但是,元素无法滚动,因为滚动条出现在元素上pointer-events: none.这可以在这个例子中看到:http://jsbin.com/madure/2/edit？html,css,output.

是否有解决方法,或者是否需要在浏览器级别解决？也许有一个额外的规则,pointer-events: scrollOnly.

Answer 1

pointer-events CSS 属性指定在什么情况下（如果有的话）特定的图形元素可以成为鼠标 事件的目标。

因此，基本上，如果您使上层对单击不敏感，那么对滚轮事件也会如此。我建议两件事

JavaScript 解决方法： 基本上使用以下事实：

请注意，通过使用指针事件防止元素成为鼠标事件的目标并不一定意味着该元素上的鼠标事件侦听器不能或不会被触发

	$(function(){
		$("#stage-layer").on("wheel",function(e){
			eo=e.originalEvent;
			s=$("#scrollable")
			switch(eo.deltaMode){
				case 0: 		//DOM_DELTA_PIXEL		Chrome
					s.scrollTop(eo.deltaY+s.scrollTop())
					s.scrollLeft(eo.deltaX+s.scrollLeft())	
					break;
				case 1: 		//DOM_DELTA_LINE		Firefox
					s.scrollTop(15*eo.deltaY+s.scrollTop())	//scroll(e.deltaX, e.deltaY); 	Just a random small amount of scrolling 
					s.scrollLeft(15*eo.deltaX+s.scrollLeft())
					break;
				case 2: 		//DOM_DELTA_PAGE
					s.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>

一个很好的提示：

这可能不会立即产生解决方案，但对于长期 Web 开发来说这是一个不错的选择：

我们希望在 HTML 中提供更细粒度的控制（不仅仅是自动和无）...如果您希望能够使用此属性执行任何特定操作，请将它们添加到本文档的用例 部分维基页面（不用担心保持整洁）。

来源：指针事件