jquery - 滚动到此元素覆盖时无法使元素滚动

Question

我正在使用 mcustomscrollbar特定区域上的插件，当我向该元素添加叠加层时遇到问题，我无法滚动下方元素。我只能在蓝色区域滚动，我也想滚动另一个区域。我尝试触发 mousewheel 事件，但没有成功。

非常感谢任何帮助!
这是我的问题的片段:

(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

问题出在 .overlay 上，它位于内容之上，因此用户操作被禁用。你可以简单地使用 pointer-events: none 。它不适用于 IE11，因此您也可以使用 display: inline-block 使其适用于 IE11。

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