Разрешать события указателя (щелчка) для прохождения через элемент при сохранении возможности прокрутки

Моя цель - иметь элемент, который позволяет:

  • элементы, под которыми нужно щелкнуть/взаимодействовать с,
  • скроллинг

Решение 1 широко известно как pointer-events: none. Это описано в Нажмите DIV на базовые элементы.

Однако элемент нельзя прокручивать, потому что в элементе с помощью pointer-events: none отображается полоса прокрутки. Это можно увидеть в этом примере: http://jsbin.com/madure/2/edit?html,css,output.

Есть ли обходной путь к этому, или это то, что нужно было бы решить на уровне браузера? Возможно, с дополнительным правилом pointer-events: scrollOnly.

ОТВЕТЫ

Ответ 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>

Ответ 2

Это действительно не "сломать" прокрутку. Если у вас есть дочерний элемент pointer-events: none элемента, то на самом деле происходит то, что наследует правило pointer-events: none CSS.

Поэтому, если вы установите в своем дочернем элементе: pointer-events: all для этого дочернего элемента все вернется в норму. Родительский элемент по-прежнему пропускает события указателя, и, конечно, дочерний элемент этого не делает. Я думаю, что это своего рода последовательное поведение.

Модифицированный JSBin: https://jsbin.com/dadixoyuqu/1/edit?html,css,output