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

Posted 2023-05-09

【中文标题】滚动到此元素覆盖时无法使元素滚动

【英文标题】：Can't make an element scroll while scrolling to this element overlay

【发布时间】：2017-07-18 01:23:54

【问题描述】：

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

非常感谢任何帮助！ 这是我的问题的 sn-p：

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

【参考方案1】：

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

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

【讨论】：

谢谢回复，但我不能使用这个，因为在覆盖下我有一些不应该点击的下拉菜单，如果我关闭了覆盖的所有事件，我将能够点击这些元素。

你在说哪个下拉菜单？在这种情况下，您仍然可以将pointer-events: none 用于该下拉菜单

在我的项目中，因为这里我只描述了我遇到的问题。但是，您已经向我提出的建议并不是一个坏主意。让我试试！

这是我的荣幸 :)

【参考方案2】：

您无法滚动，因为 div <div class="overlay"></div> 位于您的 <div class="container"> 之上。 将宽度 96% 从 100% 从 .overlay 类更改。

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

【讨论】：

感谢您的回复，但这仅在您位于滚动区域而不是覆盖区域时有效！ :(

@TeutaKoraqi 好的理解你的问题，我可以知道你为什么需要覆盖 div 吗？

点击图标时会打开此叠加层，并且有一部分内容是可见的，例如这个蓝色区域。在这个蓝色区域中，有些情况会是长内容，并且出现滚动，我应该能够在鼠标滚轮覆盖覆盖层时滚动内容，而不仅仅是在可见内容中。我很清楚？

OK 我明白了，但是这个蓝色叠加层的真正目的是什么？我的意思是蓝色区域是为了防止编辑什么的？？？

我会投票给你的答案，因为你试图帮助我。再次感谢你！ :)

【参考方案3】：

因为您检查了用户是否在 div 内而不是 body 内滑动。

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