允许指针（单击）事件通过元素，同时保持滚动功能 [英] Allow pointer (click) events to pass through element whilst maintaining scroll facility

问题描述

我的目标是拥有一个允许以下内容的元素：

My goal is to have an element which allows:

1. 下面的元素被点击/与之互动，


2. 滚动

众所周知，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.

推荐答案

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

所以基本上如果你让上层不敏感点击它就会这样对于车轮事件也是如此我建议两件事情

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:

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

Note that preventing an element from being the target of mouse events by using pointer-events does not necessarily mean that mouse event listeners on that element cannot or will not be triggered

	$(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>

一个不错的提示：

这可能不会立即产生解决方案，但它是长期网站开发的不错选择：

This will not probably yield an immediate solution but it is a good choice for long term web development :

我们希望
在HTML中提供更细粒度的控制（而不仅仅是自动和无）...
如果您有任何特定的事情，那么您希望能够用这个属性做
，然后请将它们添加到
的用例部分这个维基页面（不要担心保持整洁）。

We would like to provide finer grained control (than just auto and none) in HTML ... if you have any particular things that you would like to be able to do with this property, then please add them to the Use Cases section of this wiki page (don't worry about keeping it tidy).

来源：< a href =https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events =nofollow noreferrer>指针事件

Source : pointer-events

这篇关于允许指针（单击）事件通过元素，同时保持滚动功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！