Ответ 1
Свойство 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>