Add wheelPropagationDisabledIfScrollable option

examples/options-wheelPropagation.html

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

src/handlers/keyboard.js

@@ -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;
       }
     }

src/handlers/mouse-wheel.js

@@ -26,7 +26,15 @@ export default function(i) {
       hitsBound = isLeft || isRight;
     }
 
-    return hitsBound ? !i.settings.wheelPropagation : true;
+    if (hitsBound) {
+      if (i.settings.wheelPropagationDisabledIfScrollable) {
+        return element.scrollHeight > element.clientHeight;
+      }
+
+      return !i.settings.wheelPropagation;
+    }
+
+    return true;
   }
 
   function getDeltaFromEvent(e) {

src/index.js

@@ -24,6 +24,7 @@ const defaultSettings = () => ({
   swipeEasing: true,
   useBothWheelAxes: false,
   wheelPropagation: true,
+  wheelPropagationDisabledIfScrollable: false,
   wheelSpeed: 1,
 });
 

types/perfect-scrollbar.d.ts

@@ -11,6 +11,7 @@ declare namespace PerfectScrollbar {
     swipeEasing?: boolean;
     useBothWheelAxes?: boolean;
     wheelPropagation?: boolean;
+    wheelPropagationDisabledIfScrollable?: boolean;
     wheelSpeed?: number;
   }
 }
@@ -56,7 +57,7 @@ declare class PerfectScrollbar {
   scrollbarYRight: number;
   scrollbarYTop: number;
   settings: PerfectScrollbar.Options;
-  reach: { x: 'start' | 'end' | null, y: 'start' | 'end' | null };
+  reach: { x: "start" | "end" | null; y: "start" | "end" | null };
 }
 
 export default PerfectScrollbar;