Add wheelPropagationDisabledIfScrollable option

Author: SvenSchoene

dist/perfect-scrollbar.common.js

@@ -44,6 +44,18 @@
       font-size: 20px;
     }
 
+    .container .content-no-scroll {
+      background-image: url('https://mdbootstrap.com/img/Marketing/general/logo/big/mdb.png');
+      width: 12800px;
+      height: 200px;
+      color: blue;
+      font-size: 20px;
+    }
+
+    .container .smaller-font-size {
+      font-size: 12px;
+    }
+
     .space {
       padding: 150px 0;
       text-align: center;
@@ -94,18 +106,42 @@ <h1>Wheel Propagation</h1>
 
     <br>
     <div class="space my-5">FOR SPACE</div>
+    <div class="container">
+      <div class="content-no-scroll">
+        <div class="alert alert-primary sticky-top font-weight-bold m-5" role="alert" style="z-index: 10; width:300px">
+          Default (not scrollable)
+        </div>
+      </div>
+    </div>
+    <div class="space my-5">FOR SPACE</div>
     <div class="container">
       <div class="content">
         <div class="alert alert-primary sticky-top font-weight-bold m-5" role="alert" style="z-index: 10; width:300px">
-          Default
+          Default (scrollable)
         </div>
       </div>
     </div>
     <div class="space my-5">FOR SPACE</div>
     <div class="container">
       <div class="content">
         <div class="alert alert-primary sticky-top font-weight-bold m-5" role="alert" style="z-index: 10; width:300px">
-          wheelPropagation: true
+          wheelPropagation: false
+        </div>
+      </div>
+    </div>
+    <div class="space my-5">FOR SPACE</div>
+    <div class="container">
+      <div class="content-no-scroll">
+        <div class="alert alert-primary sticky-top font-weight-bold m-5 smaller-font-size" role="alert" style="z-index: 10; width:300px">
+          wheelPropagationDisabledIfScrollable: true<br>(not scrollable)
+        </div>
+      </div>
+    </div>
+    <div class="space my-5">FOR SPACE</div>
+    <div class="container">
+      <div class="content">
+        <div class="alert alert-primary sticky-top font-weight-bold m-5 smaller-font-size" role="alert" style="z-index: 10; width:300px">
+          wheelPropagationDisabledIfScrollable: true<br>(scrollable)
         </div>
       </div>
     </div>
@@ -119,11 +155,19 @@ <h1>Wheel Propagation</h1>
     var containers = document.querySelectorAll('.container');
 
     new PerfectScrollbar(containers[0]);
+    new PerfectScrollbar(containers[1]);
 
-    new PerfectScrollbar(containers[1], {
-      wheelPropagation: true
+    new PerfectScrollbar(containers[2], {
+      wheelPropagation: false
     });
 
+    new PerfectScrollbar(containers[3], {
+      wheelPropagationDisabledIfScrollable: true
+    });
+
+    new PerfectScrollbar(containers[4], {
+      wheelPropagationDisabledIfScrollable: true
+    });
   </script>
 
 

dist/perfect-scrollbar.common.js.map

@@ -13,12 +13,16 @@ export default function(i) {
     const scrollTop = Math.floor(element.scrollTop);
     if (deltaX === 0) {
       if (!i.scrollbarYActive) {
-        return false;
+        return !i.settings.wheelPropagationDisabledIfScrollable;
       }
       if (
         (scrollTop === 0 && deltaY > 0) ||
         (scrollTop >= i.contentHeight - i.containerHeight && deltaY < 0)
       ) {
+        if (i.settings.wheelPropagationDisabledIfScrollable) {
+          return true;
+        }
+
         return !i.settings.wheelPropagation;
       }
     }