Ein Element kann nicht gescrollt werden, während zu diesem Element-Overlay gescrollt wird

Question

Ich benutze mcustomscrollbar Plugin in einem bestimmten Bereich, und ich habe ein Problem, wenn ich ein Overlay zu diesem Element hinzufüge, kann ich nicht scrollen Element. Ich kann nur auf einem blauen Bereich scrollen, ich möchte auch einen anderen Bereich scrollen. Ich habe versucht, mousewheel event auszulösen, aber kein Glück.

Jede Hilfe sehr geschätzt!
Hier ist das Snippet mit meiner Frage:

(function($){ 
 
     jQuery(window).load(function(){ 
 
      jQuery(".list").mCustomScrollbar(); 
 
     }); 
 
    })(jQuery); 
 
    
 
    jQuery('.list').mCustomScrollbar({ 
 
      theme:"dark-3" 
 
    }); 
 
     
 
    $(".overlay").on("mousewheel", function(){ 
 
     jQuery(".list").trigger("mousewheel"); 
 
    }) 
 

.list{ 
 
    height: 100px; 
 
    overflow-y: auto; 
 
    overflow-x: auto; 
 
    
 
} 
 
.overlay { 
 
    position: fixed; 
 
    opacity: 1; 
 
    visibility: visible; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 999; 
 
    background-color: rgba(255, 255, 255, .5); 
 
    -webkit-transition: opacity .15s ease-out; 
 
    -moz-transition: opacity .15s ease-out; 
 
    transition: opacity .15s ease-out; 
 
} 
 

 
.inner-list { 
 
    width: 30%; 
 
    float:left; 
 
    background: lightblue; 
 
    position: relative; 
 
    z-index: 9999; 
 
    overflow: hidden; 
 
} 
 

 
.question { 
 
     position: absolute; 
 
    right: 120px; 
 
    top: 40px; 
 
} 
 

 
.row{ 
 
    list-style-type: none; 
 
    overflow: hidden; 
 
    width: 200px; 
 
    height: 20px; 
 
} 
 
.row:hover{ 
 
    background-color: #E0EBEE; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.concat.min.js"></script> 
 
<link href="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.min.css" rel="stylesheet"/> 
 

 

 
<div class="container"> 
 
<ul class="list"> 
 
    <div class="inner-list"> 
 
     <li class="row" id="1">1</li> 
 
     <li class="row" id="2">2</li> 
 
     <li class="row" id="3">3</li> 
 
     <li class="row" id="4">4</li> 
 
     <li class="row" id="5">5</li> 
 
     <li class="row" id="6">6</li> 
 
     <li class="row" id="7">7</li> 
 
     <li class="row" id="8">8</li> 
 
     <li class="row" id="9">9</li> 
 
     <li class="row" id="10">10</li> 
 
     <li class="row" id="11">11</li> 
 
     <li class="row" id="12">12</li> 
 
     <li class="row" id="13">13</li> 
 
     <li class="row" id="14">14</li> 
 
     <li class="row" id="15">15</li> 
 
     <li class="row" id="16">16</li> 
 
     <li class="row" id="17">17</li> 
 
     <li class="row" id="18">18</li> 
 
     <li class="row" id="19">19</li> 
 
     <li class="row" id="20">20</li> 
 
    </div> 
 
    </ul> 
 
     <p class="question">Why can't scroll here?</p> 
 
     <div class="overlay"></div> 
 
</div>

Answer 1

das Problem ist mit .overlay, es über den Inhalt ist so deaktiviert Benutzeraktion. Sie können einfach pointer-events: none dafür verwenden. Es funktioniert nicht für IE11, also können Sie auch display: inline-block verwenden, damit es für IE11 funktioniert.

.overlay { 
    pointer-events: none; 
    display: inline-block 
} 

Answer 2

Da Sie überprüft, ob Benutzer innerhalb div scolled, nicht Körper.

(function($) { 
 
    jQuery(window).load(function() { 
 
    jQuery(".list").mCustomScrollbar(); 
 
    }); 
 
})(jQuery); 
 

 
jQuery('.list').mCustomScrollbar({ 
 
    theme: "dark-3" 
 
}); 
 

 
$("body").on("mousewheel", function() { 
 
    jQuery(".list").trigger("mousewheel"); 
 
})

.list { 
 
    height: 100px; 
 
    overflow-y: auto; 
 
    overflow-x: auto; 
 
} 
 

 
.overlay { 
 
    position: fixed; 
 
    opacity: 1; 
 
    visibility: visible; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 999; 
 
    background-color: rgba(255, 255, 255, .5); 
 
    -webkit-transition: opacity .15s ease-out; 
 
    -moz-transition: opacity .15s ease-out; 
 
    transition: opacity .15s ease-out; 
 
} 
 

 
.inner-list { 
 
    width: 30%; 
 
    float: left; 
 
    background: lightblue; 
 
    position: relative; 
 
    z-index: 9999; 
 
    overflow: hidden; 
 
} 
 

 
.question { 
 
    position: absolute; 
 
    right: 120px; 
 
    top: 40px; 
 
} 
 

 
.row { 
 
    list-style-type: none; 
 
    overflow: hidden; 
 
    width: 200px; 
 
    height: 20px; 
 
} 
 

 
.row:hover { 
 
    background-color: #E0EBEE; 
 
}

<div class="container"> 
 
    <ul class="list"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
    <script src="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.concat.min.js"></script> 
 
    <link href="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.min.css" rel="stylesheet" /> 
 

 
    <div class="inner-list"> 
 
     <li class="row" id="1">1</li> 
 
     <li class="row" id="2">2</li> 
 
     <li class="row" id="3">3</li> 
 
     <li class="row" id="4">4</li> 
 
     <li class="row" id="5">5</li> 
 
     <li class="row" id="6">6</li> 
 
     <li class="row" id="7">7</li> 
 
     <li class="row" id="8">8</li> 
 
     <li class="row" id="9">9</li> 
 
     <li class="row" id="10">10</li> 
 
     <li class="row" id="11">11</li> 
 
     <li class="row" id="12">12</li> 
 
     <li class="row" id="13">13</li> 
 
     <li class="row" id="14">14</li> 
 
     <li class="row" id="15">15</li> 
 
     <li class="row" id="16">16</li> 
 
     <li class="row" id="17">17</li> 
 
     <li class="row" id="18">18</li> 
 
     <li class="row" id="19">19</li> 
 
     <li class="row" id="20">20</li> 
 
    </div> 
 
    </ul> 
 
    <p class="question">Why can't scroll here?</p> 
 

 
</div>

Answer 3

Sie sind blättern nicht in der Lage, weil die div <div class="overlay"></div> auf Ihre <div class="container"> ist.
Geändert Breite 96% von 100% von .overlay Klasse.

(function($){ 
 
     jQuery(window).load(function(){ 
 
      jQuery(".list").mCustomScrollbar(); 
 
     }); 
 
    })(jQuery); 
 
    
 
    jQuery('.list').mCustomScrollbar({ 
 
      theme:"dark-3" 
 
    }); 
 
     
 
    $(".overlay").on("mousewheel", function(){ 
 
     jQuery(".list").trigger("mousewheel"); 
 
    })

.list{ 
 
    height: 100px; 
 
    overflow-y: auto; 
 
    overflow-x: auto; 
 
    
 
} 
 
.overlay { 
 
    position: fixed; 
 
    opacity: 1; 
 
    visibility: visible; 
 
    top: 0; 
 
    left: 0; 
 
    width: 96%; 
 
    height: 100%; 
 
    z-index: 999; 
 
    background-color: rgba(255, 255, 255, .5); 
 
    -webkit-transition: opacity .15s ease-out; 
 
    -moz-transition: opacity .15s ease-out; 
 
    transition: opacity .15s ease-out; 
 
} 
 

 
.inner-list { 
 
    width: 30%; 
 
    float:left; 
 
    background: lightblue; 
 
    position: relative; 
 
    z-index: 9999; 
 
    overflow: hidden; 
 
} 
 

 
.question { 
 
     position: absolute; 
 
    right: 120px; 
 
    top: 40px; 
 
} 
 

 
.row{ 
 
    list-style-type: none; 
 
    overflow: hidden; 
 
    width: 200px; 
 
    height: 20px; 
 
} 
 
.row:hover{ 
 
    background-color: #E0EBEE; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.concat.min.js"></script> 
 
<link href="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.min.css" rel="stylesheet"/> 
 

 

 
<div class="container"> 
 
<ul class="list"> 
 
    <div class="inner-list"> 
 
     <li class="row" id="1">1</li> 
 
     <li class="row" id="2">2</li> 
 
     <li class="row" id="3">3</li> 
 
     <li class="row" id="4">4</li> 
 
     <li class="row" id="5">5</li> 
 
     <li class="row" id="6">6</li> 
 
     <li class="row" id="7">7</li> 
 
     <li class="row" id="8">8</li> 
 
     <li class="row" id="9">9</li> 
 
     <li class="row" id="10">10</li> 
 
     <li class="row" id="11">11</li> 
 
     <li class="row" id="12">12</li> 
 
     <li class="row" id="13">13</li> 
 
     <li class="row" id="14">14</li> 
 
     <li class="row" id="15">15</li> 
 
     <li class="row" id="16">16</li> 
 
     <li class="row" id="17">17</li> 
 
     <li class="row" id="18">18</li> 
 
     <li class="row" id="19">19</li> 
 
     <li class="row" id="20">20</li> 
 
    </div> 
 
    </ul> 
 
     <p class="question">Why can't scroll here?</p> 
 
     <div class="overlay"></div> 
 
</div>