v1.5.6

Please refer to Releases for changelog.

https://github.com/mdbootstrap/perfect-scrollbar/releases

package.json

@@ -1,6 +1,6 @@
 {
   "name": "perfect-scrollbar",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "description": "Minimalistic but perfect custom scrollbar plugin",
   "author": "Hyunje Jun <[email protected]>",
   "keywords": [

release

@@ -19,7 +19,7 @@ message="v$version
 
 Please refer to Releases for changelog.
 
-https://github.com/utatti/perfect-scrollbar/releases"
+https://github.com/mdbootstrap/perfect-scrollbar/releases"
 
 # Commit, tag, and show detail and file names
 git commit . -m "$message"

src/handlers/click-rail.js

@@ -1,14 +1,13 @@
+/* eslint-disable */
+
 import updateGeometry from '../update-geometry';
 
-export default function(i) {
-  const element = i.element;
+export default function (i) {
+  // const element = i.element;
 
-  i.event.bind(i.scrollbarY, 'mousedown', e => e.stopPropagation());
-  i.event.bind(i.scrollbarYRail, 'mousedown', e => {
-    const positionTop =
-      e.pageY -
-      window.pageYOffset -
-      i.scrollbarYRail.getBoundingClientRect().top;
+  i.event.bind(i.scrollbarY, 'mousedown', (e) => e.stopPropagation());
+  i.event.bind(i.scrollbarYRail, 'mousedown', (e) => {
+    const positionTop = e.pageY - window.pageYOffset - i.scrollbarYRail.getBoundingClientRect().top;
     const direction = positionTop > i.scrollbarYTop ? 1 : -1;
 
     i.element.scrollTop += direction * i.containerHeight;
@@ -17,12 +16,10 @@ export default function(i) {
     e.stopPropagation();
   });
 
-  i.event.bind(i.scrollbarX, 'mousedown', e => e.stopPropagation());
-  i.event.bind(i.scrollbarXRail, 'mousedown', e => {
+  i.event.bind(i.scrollbarX, 'mousedown', (e) => e.stopPropagation());
+  i.event.bind(i.scrollbarXRail, 'mousedown', (e) => {
     const positionLeft =
-      e.pageX -
-      window.pageXOffset -
-      i.scrollbarXRail.getBoundingClientRect().left;
+      e.pageX - window.pageXOffset - i.scrollbarXRail.getBoundingClientRect().left;
     const direction = positionLeft > i.scrollbarXLeft ? 1 : -1;
 
     i.element.scrollLeft += direction * i.containerWidth;

src/handlers/drag-thumb.js

@@ -1,24 +1,9 @@
-import * as CSS from '../lib/css';
-import * as DOM from '../lib/dom';
-import cls, {
-  addScrollingClass,
-  removeScrollingClass,
-} from '../lib/class-names';
+import cls, { addScrollingClass, removeScrollingClass } from '../lib/class-names';
 import updateGeometry from '../update-geometry';
-import { toInt } from '../lib/util';
 
-export default function(i) {
-  bindMouseScrollHandler(i, [
-    'containerWidth',
-    'contentWidth',
-    'pageX',
-    'railXWidth',
-    'scrollbarX',
-    'scrollbarXWidth',
-    'scrollLeft',
-    'x',
-    'scrollbarXRail',
-  ]);
+let activeSlider = null; // Variable to track the currently active slider
+
+export default function setupScrollHandlers(i) {
   bindMouseScrollHandler(i, [
     'containerHeight',
     'contentHeight',
@@ -30,75 +15,96 @@ export default function(i) {
     'y',
     'scrollbarYRail',
   ]);
+
+  bindMouseScrollHandler(i, [
+    'containerWidth',
+    'contentWidth',
+    'pageX',
+    'railXWidth',
+    'scrollbarX',
+    'scrollbarXWidth',
+    'scrollLeft',
+    'x',
+    'scrollbarXRail',
+  ]);
 }
 
 function bindMouseScrollHandler(
   i,
   [
-    containerHeight,
-    contentHeight,
-    pageY,
-    railYHeight,
-    scrollbarY,
-    scrollbarYHeight,
-    scrollTop,
-    y,
-    scrollbarYRail,
+    containerDimension,
+    contentDimension,
+    pageAxis,
+    railDimension,
+    scrollbarAxis,
+    scrollbarDimension,
+    scrollAxis,
+    axis,
+    scrollbarRail,
   ]
 ) {
   const element = i.element;
-
-  let startingScrollTop = null;
-  let startingMousePageY = null;
+  let startingScrollPosition = null;
+  let startingMousePagePosition = null;
   let scrollBy = null;
 
-  function mouseMoveHandler(e) {
+  function moveHandler(e) {
     if (e.touches && e.touches[0]) {
-      e[pageY] = e.touches[0].pageY;
+      e[pageAxis] = e.touches[0][`page${axis.toUpperCase()}`];
     }
-    element[scrollTop] =
-      startingScrollTop + scrollBy * (e[pageY] - startingMousePageY);
-    addScrollingClass(i, y);
-    updateGeometry(i);
 
-    e.stopPropagation();
-    if (e.type.startsWith('touch') && e.changedTouches.length > 1) {
+    // Only move if the active slider is the one we started with
+    if (activeSlider === scrollbarAxis) {
+      element[scrollAxis] =
+        startingScrollPosition + scrollBy * (e[pageAxis] - startingMousePagePosition);
+      addScrollingClass(i, axis);
+      updateGeometry(i);
+
+      e.stopPropagation();
       e.preventDefault();
     }
   }
 
-  function mouseUpHandler() {
-    removeScrollingClass(i, y);
-    i[scrollbarYRail].classList.remove(cls.state.clicking);
-    i.event.unbind(i.ownerDocument, 'mousemove', mouseMoveHandler);
+  function endHandler() {
+    removeScrollingClass(i, axis);
+    i[scrollbarRail].classList.remove(cls.state.clicking);
+    document.removeEventListener('mousemove', moveHandler);
+    document.removeEventListener('mouseup', endHandler);
+    document.removeEventListener('touchmove', moveHandler);
+    document.removeEventListener('touchend', endHandler);
+    activeSlider = null; // Reset active slider when interaction ends
   }
 
-  function bindMoves(e, touchMode) {
-    startingScrollTop = element[scrollTop];
-    if (touchMode && e.touches) {
-      e[pageY] = e.touches[0].pageY;
-    }
-    startingMousePageY = e[pageY];
-    scrollBy =
-      (i[contentHeight] - i[containerHeight]) /
-      (i[railYHeight] - i[scrollbarYHeight]);
-    if (!touchMode) {
-      i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler);
-      i.event.once(i.ownerDocument, 'mouseup', mouseUpHandler);
-      e.preventDefault();
-    } else {
-      i.event.bind(i.ownerDocument, 'touchmove', mouseMoveHandler);
-    }
+  function bindMoves(e) {
+    if (activeSlider === null) {
+      // Only bind if no slider is currently active
+      activeSlider = scrollbarAxis; // Set current slider as active
+
+      startingScrollPosition = element[scrollAxis];
+      if (e.touches) {
+        e[pageAxis] = e.touches[0][`page${axis.toUpperCase()}`];
+      }
+      startingMousePagePosition = e[pageAxis];
+      scrollBy =
+        (i[contentDimension] - i[containerDimension]) / (i[railDimension] - i[scrollbarDimension]);
 
-    i[scrollbarYRail].classList.add(cls.state.clicking);
+      if (!e.touches) {
+        document.addEventListener('mousemove', moveHandler);
+        document.addEventListener('mouseup', endHandler);
+      } else {
+        document.addEventListener('touchmove', moveHandler, { passive: false });
+        document.addEventListener('touchend', endHandler);
+      }
+
+      i[scrollbarRail].classList.add(cls.state.clicking);
+    }
 
     e.stopPropagation();
+    if (e.cancelable) {
+      e.preventDefault();
+    }
   }
 
-  i.event.bind(i[scrollbarY], 'mousedown', e => {
-    bindMoves(e);
-  });
-  i.event.bind(i[scrollbarY], 'touchstart', e => {
-    bindMoves(e, true);
-  });
+  i[scrollbarAxis].addEventListener('mousedown', bindMoves);
+  i[scrollbarAxis].addEventListener('touchstart', bindMoves);
 }

src/handlers/keyboard.js

@@ -1,8 +1,10 @@
+/* eslint-disable */
+
 import * as DOM from '../lib/dom';
 import updateGeometry from '../update-geometry';
 import { isEditable } from '../lib/util';
 
-export default function(i) {
+export default function (i) {
   const element = i.element;
 
   const elementHovered = () => DOM.matches(element, ':hover');
@@ -38,11 +40,8 @@ export default function(i) {
     return true;
   }
 
-  i.event.bind(i.ownerDocument, 'keydown', e => {
-    if (
-      (e.isDefaultPrevented && e.isDefaultPrevented()) ||
-      e.defaultPrevented
-    ) {
+  i.event.bind(i.ownerDocument, 'keydown', (e) => {
+    if ((e.isDefaultPrevented && e.isDefaultPrevented()) || e.defaultPrevented) {
       return;
     }
 

src/handlers/mouse-wheel.js

@@ -1,21 +1,21 @@
+/* eslint-disable */
+
 import * as CSS from '../lib/css';
 import cls from '../lib/class-names';
 import updateGeometry from '../update-geometry';
 import { env } from '../lib/util';
 
-export default function(i) {
+export default function (i) {
   const element = i.element;
 
   let shouldPrevent = false;
 
   function shouldPreventDefault(deltaX, deltaY) {
     const roundedScrollTop = Math.floor(element.scrollTop);
     const isTop = element.scrollTop === 0;
-    const isBottom =
-      roundedScrollTop + element.offsetHeight === element.scrollHeight;
+    const isBottom = roundedScrollTop + element.offsetHeight === element.scrollHeight;
     const isLeft = element.scrollLeft === 0;
-    const isRight =
-      element.scrollLeft + element.offsetWidth === element.scrollWidth;
+    const isRight = element.scrollLeft + element.offsetWidth === element.scrollWidth;
 
     let hitsBound;