滾動到此元素疊加層時無法滾動元素

Question

我在特定區域上使用mcustomscrollbar插件，當我向該元素添加覆蓋時遇到問題，我無法滾動under元素。 我只能在藍色區域上滾動，我也想滾動另一個區域。 我試圖觸發mousewheel event ，但是沒有運氣。

任何幫助都非常感謝！
這是我的問題的摘要：

 (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

您無法滾動，因為div <div class="overlay"></div>位於您的<div class="container">頂部。
將.overlay類的寬度從100%更改為96% 。

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

Answer 2

問題在於.overlay ，它在內容上方，因此用戶操作被禁用。 您可以簡單地使用pointer-events: none 。 它不適用於IE11，因此您也可以使用display: inline-block使其適用於IE11。

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

Answer 3

因為您檢查了用戶是否在div內，而不是在主體內。

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