0

I'm using mcustomscrollbar plugin on a specific area, and I'm having an issue when I add an overlay to this element, I can't scroll the under element. I only can scroll on a blue area, I want to scroll another area as well. I tried to trigger mousewheel event, but no luck.

Any help very appreciated!
Here is the snippet with my issue:

(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>
Teuta Koraqi
  • 1,898
  • 1
  • 10
  • 28

3 Answers3

1

You are not able to scroll because the div <div class="overlay"></div> is on top of your <div class="container">.
Changed width 96% from 100% from .overlay class. 

(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>
Arun CM
  • 3,345
  • 2
  • 29
  • 35
  • Thnx for the reply, but this only works while you are over the scroll, not the overlay area! :( – Teuta Koraqi Feb 27 '17 at 12:26
  • @TeutaKoraqi Ok understood your problem, may I know why you need overlay div? – Arun CM Feb 27 '17 at 12:29
  • This overlay will be on when clicking an icon, and there is a part of content that will be visible, like this blue area. In this blue area there are cases that will be to long content, and there scroll appears, and I should be able to scroll the content inner while mousewheel over the overlay too, not just in the visible content. I'm a clear? – Teuta Koraqi Feb 27 '17 at 12:31
  • OK Somewhat I understood, but what is the real purpose of this blue overlay?. I mean blue area is to prevent editing or something ???? – Arun CM Feb 27 '17 at 12:39
  • I will vote your answer, cus you tried to help me. Thank you again! :) – Teuta Koraqi Feb 27 '17 at 12:42
  • @TeutaKoraqi Thanks :D, But just tell me what exactly this Overlay did do? – Arun CM Feb 27 '17 at 12:44
1

the problem is with .overlay, it is above the content so user action is disabled. you can simple use pointer-events: none for it. it doesn't work for IE11 so you can use display: inline-block as well to make it work for IE11.

.overlay {
  pointer-events: none;
  display: inline-block
}
Lucian
  • 1,715
  • 3
  • 17
  • 26
  • Thnx for the reply, but I cannot use this, cus under the overlay I have some dropdowns that should not be clicked, and if I turned off all the events of the overlay, I would be able to click those elements. – Teuta Koraqi Feb 27 '17 at 12:34
  • which dropdown are you talking about? in that case you can still use `pointer-events: none` for that dropdown as well – Lucian Feb 27 '17 at 12:37
  • In my project, cus here I only described the issue I have. But, its not a bad idea what you already suggested me. Let me try! – Teuta Koraqi Feb 27 '17 at 12:39
  • 1
    that's my pleasure :) – Lucian Feb 27 '17 at 12:42
0

Because you checked if user scolled within div, not 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>
Dražen
  • 293
  • 2
  • 13