Pozostawić wskaźnik (kliknij) wydarzenia przechodzić przez element utrzymując siłownia przewijania

Question

Moim celem jest, aby element, który pozwala na:

1. elementy pod klikany/interakcje z,
2. przewijanie

Rozwiązanie na 1 jest powszechnie znane pod numerem pointer-events: none. Jest to zgodne z opisem w Click through a DIV to underlying elements.

Elementu nie można jednak przewinąć, ponieważ pasek przewijania pojawia się na elemencie z pointer-events: none. Można to zobaczyć w tym przykładzie: http://jsbin.com/madure/2/edit?html,css,output.

Czy istnieje obejście tego problemu, czy też jest to coś, co należy zająć się na poziomie przeglądarki? Być może z dodatkową zasadą, pointer-events: scrollOnly.

Answer 1

Obiekt pointer-events CSS określa w jakich okolicznościach (jeśli występują) dany element graficzny może stać się celem myszy imprez.

Więc w zasadzie jeśli się górną warstwę niewrażliwy dla kliknąć tak będzie do wydarzeń kołowych zbyt. Proponuję na dwie rzeczy

JavaScript obejście: które zasadniczo wykorzystują fakt, że:

Należy pamiętać, że zapobieganie element od bycia celem zdarzenia myszy za pomocą wskaźnika-wydarzenia niekoniecznie oznacza to, że zdarzenie myszy słuchaczy na tym elemencie nie mogą lub nie będzie wyzwalany

\t $(function(){ 
 
\t \t $("#stage-layer").on("wheel",function(e){ 
 
\t \t \t eo=e.originalEvent; 
 
\t \t \t s=$("#scrollable") 
 
\t \t \t switch(eo.deltaMode){ 
 
\t \t \t \t case 0: \t \t //DOM_DELTA_PIXEL \t \t Chrome 
 
\t \t \t \t \t s.scrollTop(eo.deltaY+s.scrollTop()) 
 
\t \t \t \t \t s.scrollLeft(eo.deltaX+s.scrollLeft()) \t 
 
\t \t \t \t \t break; 
 
\t \t \t \t case 1: \t \t //DOM_DELTA_LINE \t \t Firefox 
 
\t \t \t \t \t s.scrollTop(15*eo.deltaY+s.scrollTop()) \t //scroll(e.deltaX, e.deltaY); \t Just a random small amount of scrolling 
 
\t \t \t \t \t s.scrollLeft(15*eo.deltaX+s.scrollLeft()) 
 
\t \t \t \t \t break; 
 
\t \t \t \t case 2: \t \t //DOM_DELTA_PAGE 
 
\t \t \t \t \t s.scrollTop(0.03*eo.deltaY+s.scrollTop()) 
 
\t \t \t \t \t s.scrollLeft(0.03*eo.deltaX+s.scrollLeft()) 
 
\t \t \t \t \t break; 
 
\t \t \t } 
 
\t \t \t e.stopPropagation(); 
 
\t \t \t e.preventDefault() 
 
\t \t }) 
 
\t \t 
 
\t })

.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>

Miły wskazówka:

To prawdopodobnie nie uzyskując natychmiastowe rozwiązanie, ale jest to dobry wybór dla długoterminowego rozwoju sieci:

Chcielibyśmy dostarczenie drobniejsze kontrola ziarnistości (niż tylko auto i brak) w HTML ... jeśli masz jakieś szczególne rzeczy, które chciałbyś móc zrobić z tą właściwością , dodaj je do sekcji Use Cases of this wiki page (nie martw się o zachowanie porządku).

Źródło: pointer-events