Keep scroll reach state in instance via ps.reach

Example and documentation are also updated.

README.md

@@ -266,6 +266,10 @@ that Y axis scroll bar is not enabled just because of a few pixels.
 
 perfect-scrollbar dispatches custom events.
 
+```js
+container.addEventListener('ps-scroll-x', () => ...);
+```
+
 ### `ps-scroll-y`
 
 This event fires when the y-axis is scrolled in either direction.
@@ -307,8 +311,13 @@ This event fires when scrolling reaches the start of the x-axis.
 
 This event fires when scrolling reaches the end of the x-axis.
 
+You can also watch the reach state via the `reach` property.
+
 ```js
-container.addEventListener('ps-scroll-x', () => ...);
+const ps = new PerfectScrollbar(...);
+
+console.log(ps.reach.x); // => 'start' or 'end' or null
+console.log(ps.reach.y); // => 'start' or 'end' or null
 ```
 
 ## Helpdesk

examples/events.html

@@ -17,8 +17,15 @@
       width: 1280px;
       height: 720px;
     }
-    p {
-      text-align: center;
+    table {
+      width: 600px;
+      margin: 30px auto;
+    }
+    table td:first-child {
+      width: 200px;
+      padding-right: 10px;
+      text-align: right;
+      font-weight: bold;
     }
     </style>
   </head>
@@ -28,60 +35,83 @@
       </div>
     </div>
 
-    <p><b>Axis:</b> <span id="axis">&hellip;</span></p>
-    <p><b>Direction:</b> <span id="direction">&hellip;</span></p>
-    <p><b>Reached:</b> <span id="reached">(scroll to the start or end of an axis)</span></p>
+    <table>
+      <tr>
+        <td>Axis:</td>
+        <td id="axis"></td>
+      </tr>
+      <tr>
+        <td>Direction:</td>
+        <td id="direction"></td>
+      </tr>
+      <tr>
+        <td>Reach event:</td>
+        <td id="reach-event"></td>
+      </tr>
+      <tr>
+        <td>Reach state (<code>ps.reach</code>):</td>
+        <td id="reach-state"></td>
+      </tr>
+    </table>
 
     <script>
     var $ = document.querySelector.bind(document);
 
     var container = $('#container');
     var axis = $('#axis');
     var direction = $('#direction');
-    var reached = $('#reached');
+    var reachEvent = $('#reach-event');
+    var reachState = $('#reach-state');
+
+    var ps = new PerfectScrollbar(container);
+
+    function showReachState() {
+      reachState.textContent = JSON.stringify(ps.reach);
+    }
 
-    new PerfectScrollbar(container);
+    showReachState();
+    container.addEventListener('scroll', showReachState);
 
     container.addEventListener('ps-scroll-y', function () {
-      axis.textContent = 'y';
-      reached.textContent = 'none';
+      axis.textContent = 'ps-scroll-y';
+      reachEvent.textContent = '';
     });
 
     container.addEventListener('ps-scroll-x', function () {
-      axis.textContent = 'x';
-      reached.textContent = 'none';
+      axis.textContent = 'ps-scroll-x';
+      reachEvent.textContent = '';
     });
 
     container.addEventListener('ps-scroll-up', function () {
-      direction.textContent = 'up';
+      direction.textContent = 'ps-scroll-up';
     });
 
     container.addEventListener('ps-scroll-down', function () {
-      direction.textContent = 'down';
+      direction.textContent = 'ps-scroll-down';
     });
 
     container.addEventListener('ps-scroll-left', function () {
-      direction.textContent = 'left';
+      direction.textContent = 'ps-scroll-left';
     });
 
     container.addEventListener('ps-scroll-right', function () {
-      direction.textContent = 'right';
+      direction.textContent = 'ps-scroll-right';
     });
 
     container.addEventListener('ps-y-reach-start', function () {
-      reached.textContent = 'y start';
+      reachEvent.textContent = 'ps-y-reach-start';
     });
 
     container.addEventListener('ps-y-reach-end', function () {
-      reached.textContent = 'y end';
+      reachEvent.textContent = 'ps-y-reach-end';
     });
 
     container.addEventListener('ps-x-reach-start', function () {
-      reached.textContent = 'x start';
+      reachEvent.textContent = 'ps-x-reach-start';
     });
 
     container.addEventListener('ps-x-reach-end', function () {
-      reached.textContent = 'x end';
+      reachEvent.textContent = 'ps-x-reach-end';
     });
     </script>
   </body>

src/index.js

@@ -134,6 +134,21 @@ export default class PerfectScrollbar {
     this.railYHeight = null;
     this.railYRatio = null;
 
+    this.reach = {
+      x:
+        element.scrollLeft <= 0
+          ? 'start'
+          : element.scrollLeft >= this.contentWidth - this.containerWidth
+            ? 'end'
+            : null,
+      y:
+        element.scrollTop <= 0
+          ? 'start'
+          : element.scrollTop >= this.contentHeight - this.containerHeight
+            ? 'end'
+            : null,
+    };
+
     this.settings.handlers.forEach(handlerName => handlers[handlerName](this));
 
     this.event.bind(this.element, 'scroll', () => updateGeometry(this));

src/update-scroll.js

@@ -59,13 +59,15 @@ function updateScroll(
 ) {
   const element = i.element;
 
-  let reach = 0; // -1 for start, +1 for end, 0 for none
   let mitigated = false;
 
+  // reset reach
+  i.reach[y] = null;
+
   // don't allow negative scroll offset
   if (value <= 0) {
     value = 0;
-    reach = -1;
+    i.reach[y] = 'start';
   }
 
   // don't allow scroll past container
@@ -77,7 +79,7 @@ function updateScroll(
       mitigated = true;
     }
 
-    reach = 1;
+    i.reach[y] = 'end';
   }
 
   let diff = element[scrollTop] - value;
@@ -95,10 +97,8 @@ function updateScroll(
       element[scrollTop] = value;
     }
 
-    if (reach) {
-      element.dispatchEvent(
-        createEvent(`ps-${y}-reach-${reach > 0 ? 'end' : 'start'}`)
-      );
+    if (i.reach[y]) {
+      element.dispatchEvent(createEvent(`ps-${y}-reach-${i.reach[y]}`));
     }
 
     setScrollingClass(element, y);

types/perfect-scrollbar.d.ts

@@ -20,6 +20,8 @@ declare class PerfectScrollbar {
 
   update(): void;
   destroy(): void;
+
+  reach: { x: 'start' | 'end' | null, y: 'start' | 'end' | null };
 }
 
 export default PerfectScrollbar;