Allow children native scroll

Partly uses @DEFusion's #459 pull-request. Closes #455
9 years ago · f14b6a0d47
parent 9580e08886
commit f14b6a0d47
2 changed files with 86 additions and 10 deletions
--- a/examples/children-native-scroll.html
+++ b/examples/children-native-scroll.html
@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>perfect-scrollbar example</title>
+    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
+    <script src="../dist/js/perfect-scrollbar.js"></script>
+    <style>
+        .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
+        .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
+        .my-list, textarea {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 130px;
+            height: 200px;
+            overflow: scroll;
+            background-color: rgba(255,255,255,0.6);
+        }
+
+        .my-list {
+            left: 140px;
+        }
+
+        .my-list-two {
+            left: 280px;
+            overflow: auto;
+        }
+
+        ul {
+            margin: 0;
+            padding: 0;
+        }
+
+        li {
+            box-sizing: border-box;
+            padding: 10px 5px;
+            border-width: 0 0 1px 0;
+            list-style-type: none;
+            margin: 0;
+        }
+
+        li:nth-child(even) {
+            background-color: rgba(0,0,0,0.5);
+        }
+
+        textarea {
+            font-size: 120%;
+        }
+    </style>
+</head>
+<div id="Default" class="contentHolder">
+    <div class="content">
+        <textarea cols="20" rows="50">
+          Children inside perfect scrollbar can be natively scrolled by the mousewheel. It automatically works for textarea elements, other elements need the .ps-child class.
+        </textarea>
+        <div class="ps-child my-list">
+            <code>overflow: scroll</code>
+            <ul><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li></ul>
+        </div>
+        <div class="ps-child my-list my-list-two">
+            <code>overflow: auto</code>
+            <ul><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li></ul>
+        </div>
+    </div>
+</div>
+<script type="text/javascript">
+    window.onload = function () {
+        Ps.initialize(document.querySelector('#Default'));
+    };
+</script>
+</body>
+</html>
--- a/src/js/plugin/handler/mouse-wheel.js
+++ b/src/js/plugin/handler/mouse-wheel.js
@ -55,20 +55,23 @@ function bindMouseWheelHandler(element, i) {
    return [deltaX, deltaY];
  }

-  function shouldBeConsumedByTextarea(deltaX, deltaY) {
-    var hoveredTextarea = element.querySelector('textarea:hover');
-    if (hoveredTextarea) {
-      var maxScrollTop = hoveredTextarea.scrollHeight - hoveredTextarea.clientHeight;
+  function shouldBeConsumedByChild(deltaX, deltaY) {
+    var child = element.querySelector('textarea:hover, .ps-child:hover');
+    if (child) {
+      console.log(child);
+      if (child.tagName !== 'TEXTAREA' && !window.getComputedStyle(child).overflow.match(/(scroll|auto)/)) {
+        return false;
+      }
+
+      var maxScrollTop = child.scrollHeight - child.clientHeight;
      if (maxScrollTop > 0) {
-        if (!(hoveredTextarea.scrollTop === 0 && deltaY > 0) &&
-            !(hoveredTextarea.scrollTop === maxScrollTop && deltaY < 0)) {
+        if (!(child.scrollTop === 0 && deltaY > 0) && !(child.scrollTop === maxScrollTop && deltaY < 0)) {
          return true;
        }
      }
-      var maxScrollLeft = hoveredTextarea.scrollLeft - hoveredTextarea.clientWidth;
+      var maxScrollLeft = child.scrollLeft - child.clientWidth;
      if (maxScrollLeft > 0) {
-        if (!(hoveredTextarea.scrollLeft === 0 && deltaX < 0) &&
-            !(hoveredTextarea.scrollLeft === maxScrollLeft && deltaX > 0)) {
+        if (!(child.scrollLeft === 0 && deltaX < 0) && !(child.scrollLeft === maxScrollLeft && deltaX > 0)) {
          return true;
        }
      }
@ -82,7 +85,7 @@ function bindMouseWheelHandler(element, i) {
    var deltaX = delta[0];
    var deltaY = delta[1];

-    if (shouldBeConsumedByTextarea(deltaX, deltaY)) {
+    if (shouldBeConsumedByChild(deltaX, deltaY)) {
      return;
    }