@titaui/pc 1.9.53 → 1.9.54

package/src/components/scrollbar/simplebar/simplebar.js

@@ -1,11 +1,11 @@
-import throttle from "lodash.throttle";
-import debounce from "lodash.debounce";
-import memoize from "lodash.memoize";
+import throttle from 'lodash.throttle';
+import debounce from 'lodash.debounce';
+import memoize from 'lodash.memoize';
 // import { ResizeObserver } from '@juggle/resize-observer';
-import ResizeObserver from "resize-observer-polyfill";
-import canUseDOM from "can-use-dom";
-import scrollbarWidth from "./scrollbar-width";
-import { getElementWindow, getElementDocument } from "./helpers";
+import ResizeObserver from 'resize-observer-polyfill';
+import canUseDOM from 'can-use-dom';
+import scrollbarWidth from './scrollbar-width';
+import { getElementWindow, getElementDocument } from './helpers';
 
 export default class SimpleBar {
   constructor(element, options) {
@@ -14,37 +14,37 @@ export default class SimpleBar {
     this.options = { ...SimpleBar.defaultOptions, ...options };
     this.classNames = {
       ...SimpleBar.defaultOptions.classNames,
-      ...this.options.classNames,
+      ...this.options.classNames
     };
     this.axis = {
       x: {
-        scrollOffsetAttr: "scrollLeft",
-        sizeAttr: "width",
-        scrollSizeAttr: "scrollWidth",
-        offsetSizeAttr: "offsetWidth",
-        offsetAttr: "left",
-        overflowAttr: "overflowX",
+        scrollOffsetAttr: 'scrollLeft',
+        sizeAttr: 'width',
+        scrollSizeAttr: 'scrollWidth',
+        offsetSizeAttr: 'offsetWidth',
+        offsetAttr: 'left',
+        overflowAttr: 'overflowX',
         dragOffset: 0,
         isOverflowing: true,
         isVisible: false,
         forceVisible: false,
         track: {},
-        scrollbar: {},
+        scrollbar: {}
       },
       y: {
-        scrollOffsetAttr: "scrollTop",
-        sizeAttr: "height",
-        scrollSizeAttr: "scrollHeight",
-        offsetSizeAttr: "offsetHeight",
-        offsetAttr: "top",
-        overflowAttr: "overflowY",
+        scrollOffsetAttr: 'scrollTop',
+        sizeAttr: 'height',
+        scrollSizeAttr: 'scrollHeight',
+        offsetSizeAttr: 'offsetHeight',
+        offsetAttr: 'top',
+        overflowAttr: 'overflowY',
         dragOffset: 0,
         isOverflowing: true,
         isVisible: false,
         forceVisible: false,
         track: {},
-        scrollbar: {},
-      },
+        scrollbar: {}
+      }
     };
     this.removePreventClickId = null;
 
@@ -57,10 +57,10 @@ export default class SimpleBar {
     this.onMouseMove = throttle(this.onMouseMove.bind(this), 64);
     this.hideScrollbars = debounce(
       this.hideScrollbars.bind(this),
-      this.options.timeout,
+      this.options.timeout
     );
     this.onWindowResize = debounce(this.onWindowResize.bind(this), 64, {
-      leading: true,
+      leading: true
     });
 
     SimpleBar.getRtlHelpers = memoize(SimpleBar.getRtlHelpers);
@@ -79,8 +79,9 @@ export default class SimpleBar {
    * Directly inspired by @KingSora's OverlayScrollbars https://github.com/KingSora/OverlayScrollbars/blob/master/js/OverlayScrollbars.js#L1634
    */
   static getRtlHelpers() {
-    const dummyDiv = document.createElement("div");
-    dummyDiv.innerHTML = "<div class=\"hs-dummy-scrollbar-size\"><div style=\"height: 200%; width: 200%; margin: 10px 0;\"></div></div>";
+    const dummyDiv = document.createElement('div');
+    dummyDiv.innerHTML =
+      '<div class="hs-dummy-scrollbar-size"><div style="height: 200%; width: 200%; margin: 10px 0;"></div></div>';
     const scrollbarDummyEl = dummyDiv.firstElementChild;
     document.body.appendChild(scrollbarDummyEl);
     const dummyContainerChild = scrollbarDummyEl.firstElementChild;
@@ -89,19 +90,19 @@ export default class SimpleBar {
     const dummyContainerChildOffset = SimpleBar.getOffset(dummyContainerChild);
     scrollbarDummyEl.scrollLeft = 999;
     const dummyContainerScrollOffsetAfterScroll = SimpleBar.getOffset(
-      dummyContainerChild,
+      dummyContainerChild
     );
 
     return {
       // determines if the scrolling is responding with negative values
       isRtlScrollingInverted:
-        dummyContainerOffset.left !== dummyContainerChildOffset.left
-        && dummyContainerChildOffset.left
-        - dummyContainerScrollOffsetAfterScroll.left
-        !== 0,
+        dummyContainerOffset.left !== dummyContainerChildOffset.left &&
+        dummyContainerChildOffset.left -
+        dummyContainerScrollOffsetAfterScroll.left !==
+        0,
       // determines if the origin scrollbar position is inverted or not (positioned on left or right)
       isRtlScrollbarInverted:
-        dummyContainerOffset.left !== dummyContainerChildOffset.left,
+        dummyContainerOffset.left !== dummyContainerChildOffset.left
     };
   }
 
@@ -111,25 +112,25 @@ export default class SimpleBar {
     clickOnTrack: true,
     clickOnTrackSpeed: 40,
     classNames: {
-      contentEl: "simplebar-content",
-      contentWrapper: "simplebar-content-wrapper",
-      offset: "simplebar-offset",
-      mask: "simplebar-mask",
-      wrapper: "simplebar-wrapper",
-      placeholder: "simplebar-placeholder",
-      scrollbar: "simplebar-scrollbar",
-      track: "simplebar-track",
-      heightAutoObserverWrapperEl: "simplebar-height-auto-observer-wrapper",
-      heightAutoObserverEl: "simplebar-height-auto-observer",
-      visible: "simplebar-visible",
-      horizontal: "simplebar-horizontal",
-      vertical: "simplebar-vertical",
-      hover: "simplebar-hover",
-      dragging: "simplebar-dragging",
+      contentEl: 'simplebar-content',
+      contentWrapper: 'simplebar-content-wrapper',
+      offset: 'simplebar-offset',
+      mask: 'simplebar-mask',
+      wrapper: 'simplebar-wrapper',
+      placeholder: 'simplebar-placeholder',
+      scrollbar: 'simplebar-scrollbar',
+      track: 'simplebar-track',
+      heightAutoObserverWrapperEl: 'simplebar-height-auto-observer-wrapper',
+      heightAutoObserverEl: 'simplebar-height-auto-observer',
+      visible: 'simplebar-visible',
+      horizontal: 'simplebar-horizontal',
+      vertical: 'simplebar-vertical',
+      hover: 'simplebar-hover',
+      dragging: 'simplebar-dragging'
     },
     scrollbarMinSize: 25,
     scrollbarMaxSize: 0,
-    timeout: 1000,
+    timeout: 1000
   };
 
   static getOffset(el) {
@@ -139,11 +140,11 @@ export default class SimpleBar {
 
     return {
       top:
-        rect.top
-        + (elWindow.pageYOffset || elDocument.documentElement.scrollTop),
+        rect.top +
+        (elWindow.pageYOffset || elDocument.documentElement.scrollTop),
       left:
-        rect.left
-        + (elWindow.pageXOffset || elDocument.documentElement.scrollLeft),
+        rect.left +
+        (elWindow.pageXOffset || elDocument.documentElement.scrollLeft)
     };
   }
 
@@ -170,46 +171,50 @@ export default class SimpleBar {
   initDOM() {
     // make sure this element doesn't have the elements yet
     if (
-      Array.prototype.filter.call(this.el.children, (child) => child.classList.contains(this.classNames.wrapper)).length
+      Array.prototype.filter.call(this.el.children, child =>
+        child.classList.contains(this.classNames.wrapper)
+      ).length
     ) {
       // assume that element has his DOM already initiated
       this.wrapperEl = this.el.querySelector(`.${this.classNames.wrapper}`);
-      this.contentWrapperEl = this.options.scrollableNode
-        || this.el.querySelector(`.${this.classNames.contentWrapper}`);
-      this.contentEl = this.options.contentNode
-        || this.el.querySelector(`.${this.classNames.contentEl}`);
+      this.contentWrapperEl =
+        this.options.scrollableNode ||
+        this.el.querySelector(`.${this.classNames.contentWrapper}`);
+      this.contentEl =
+        this.options.contentNode ||
+        this.el.querySelector(`.${this.classNames.contentEl}`);
 
       this.offsetEl = this.el.querySelector(`.${this.classNames.offset}`);
       this.maskEl = this.el.querySelector(`.${this.classNames.mask}`);
 
       this.placeholderEl = this.findChild(
         this.wrapperEl,
-        `.${this.classNames.placeholder}`,
+        `.${this.classNames.placeholder}`
       );
       this.heightAutoObserverWrapperEl = this.el.querySelector(
-        `.${this.classNames.heightAutoObserverWrapperEl}`,
+        `.${this.classNames.heightAutoObserverWrapperEl}`
       );
       this.heightAutoObserverEl = this.el.querySelector(
-        `.${this.classNames.heightAutoObserverEl}`,
+        `.${this.classNames.heightAutoObserverEl}`
       );
       this.axis.x.track.el = this.findChild(
         this.el,
-        `.${this.classNames.track}.${this.classNames.horizontal}`,
+        `.${this.classNames.track}.${this.classNames.horizontal}`
       );
       this.axis.y.track.el = this.findChild(
         this.el,
-        `.${this.classNames.track}.${this.classNames.vertical}`,
+        `.${this.classNames.track}.${this.classNames.vertical}`
       );
     } else {
       // Prepare DOM
-      this.wrapperEl = document.createElement("div");
-      this.contentWrapperEl = document.createElement("div");
-      this.offsetEl = document.createElement("div");
-      this.maskEl = document.createElement("div");
-      this.contentEl = document.createElement("div");
-      this.placeholderEl = document.createElement("div");
-      this.heightAutoObserverWrapperEl = document.createElement("div");
-      this.heightAutoObserverEl = document.createElement("div");
+      this.wrapperEl = document.createElement('div');
+      this.contentWrapperEl = document.createElement('div');
+      this.offsetEl = document.createElement('div');
+      this.maskEl = document.createElement('div');
+      this.contentEl = document.createElement('div');
+      this.placeholderEl = document.createElement('div');
+      this.heightAutoObserverWrapperEl = document.createElement('div');
+      this.heightAutoObserverEl = document.createElement('div');
 
       this.wrapperEl.classList.add(this.classNames.wrapper);
       this.contentWrapperEl.classList.add(this.classNames.contentWrapper);
@@ -218,10 +223,10 @@ export default class SimpleBar {
       this.contentEl.classList.add(this.classNames.contentEl);
       this.placeholderEl.classList.add(this.classNames.placeholder);
       this.heightAutoObserverWrapperEl.classList.add(
-        this.classNames.heightAutoObserverWrapperEl,
+        this.classNames.heightAutoObserverWrapperEl
       );
       this.heightAutoObserverEl.classList.add(
-        this.classNames.heightAutoObserverEl,
+        this.classNames.heightAutoObserverEl
       );
 
       while (this.el.firstChild) {
@@ -239,8 +244,8 @@ export default class SimpleBar {
     }
 
     if (!this.axis.x.track.el || !this.axis.y.track.el) {
-      const track = document.createElement("div");
-      const scrollbar = document.createElement("div");
+      const track = document.createElement('div');
+      const scrollbar = document.createElement('div');
 
       track.classList.add(this.classNames.track);
       scrollbar.classList.add(this.classNames.scrollbar);
@@ -258,10 +263,10 @@ export default class SimpleBar {
     }
 
     this.axis.x.scrollbar.el = this.axis.x.track.el.querySelector(
-      `.${this.classNames.scrollbar}`,
+      `.${this.classNames.scrollbar}`
     );
     this.axis.y.scrollbar.el = this.axis.y.track.el.querySelector(
-      `.${this.classNames.scrollbar}`,
+      `.${this.classNames.scrollbar}`
     );
 
     if (!this.options.autoHide) {
@@ -269,42 +274,42 @@ export default class SimpleBar {
       this.axis.y.scrollbar.el.classList.add(this.classNames.visible);
     }
 
-    this.el.setAttribute("data-simplebar", "init");
+    this.el.setAttribute('data-simplebar', 'init');
   }
 
   setAccessibilityAttributes() {
-    const ariaLabel = this.options.ariaLabel || "scrollable content";
+    const ariaLabel = this.options.ariaLabel || 'scrollable content';
 
-    this.contentWrapperEl.setAttribute("tabindex", "0");
-    this.contentWrapperEl.setAttribute("role", "region");
-    this.contentWrapperEl.setAttribute("aria-label", ariaLabel);
+    this.contentWrapperEl.setAttribute('tabindex', '0');
+    this.contentWrapperEl.setAttribute('role', 'region');
+    this.contentWrapperEl.setAttribute('aria-label', ariaLabel);
   }
 
   initListeners() {
     const elWindow = getElementWindow(this.el);
     // Event listeners
     if (this.options.autoHide) {
-      this.el.addEventListener("mouseenter", this.onMouseEnter);
+      this.el.addEventListener('mouseenter', this.onMouseEnter);
     }
 
-    ["mousedown", "click", "dblclick"].forEach((e) => {
+    ['mousedown', 'click', 'dblclick'].forEach(e => {
       this.el.addEventListener(e, this.onPointerEvent, true);
     });
 
-    ["touchstart", "touchend", "touchmove"].forEach((e) => {
+    ['touchstart', 'touchend', 'touchmove'].forEach(e => {
       this.el.addEventListener(e, this.onPointerEvent, {
         capture: true,
-        passive: true,
+        passive: true
       });
     });
 
-    this.el.addEventListener("mousemove", this.onMouseMove);
-    this.el.addEventListener("mouseleave", this.onMouseLeave);
+    this.el.addEventListener('mousemove', this.onMouseMove);
+    this.el.addEventListener('mouseleave', this.onMouseLeave);
 
-    this.contentWrapperEl.addEventListener("scroll", this.onScroll);
+    this.contentWrapperEl.addEventListener('scroll', this.onScroll);
 
     // Browser zoom triggers a window resize
-    elWindow.addEventListener("resize", this.onWindowResize);
+    elWindow.addEventListener('resize', this.onWindowResize);
 
     // Hack for https://github.com/WICG/ResizeObserver/issues/38
     let resizeObserverStarted = false;
@@ -327,14 +332,14 @@ export default class SimpleBar {
     this.mutationObserver.observe(this.contentEl, {
       childList: true,
       subtree: true,
-      characterData: true,
+      characterData: true
     });
   }
 
   recalculate() {
     const elWindow = getElementWindow(this.el);
     this.elStyles = elWindow.getComputedStyle(this.el);
-    this.isRtl = this.elStyles.direction === "rtl";
+    this.isRtl = this.elStyles.direction === 'rtl';
 
     const isHeightAuto = this.heightAutoObserverEl.offsetHeight <= 1;
     const isWidthAuto = this.heightAutoObserverEl.offsetWidth <= 1;
@@ -351,59 +356,66 @@ export default class SimpleBar {
     const contentElScrollHeight = this.contentEl.scrollHeight;
     const contentElScrollWidth = this.contentEl.scrollWidth;
 
-    this.contentWrapperEl.style.height = isHeightAuto ? "auto" : "100%";
+    this.contentWrapperEl.style.height = isHeightAuto ? 'auto' : '100%';
 
     // Determine placeholder size
     this.placeholderEl.style.width = isWidthAuto
       ? `${contentElOffsetWidth}px`
-      : "auto";
+      : 'auto';
     this.placeholderEl.style.height = `${contentElScrollHeight}px`;
 
     const contentWrapperElOffsetHeight = this.contentWrapperEl.offsetHeight;
 
     this.axis.x.isOverflowing = contentElScrollWidth > contentElOffsetWidth;
-    this.axis.y.isOverflowing = contentElScrollHeight > contentWrapperElOffsetHeight;
+    this.axis.y.isOverflowing =
+      contentElScrollHeight > contentWrapperElOffsetHeight;
 
     // Set isOverflowing to false if user explicitely set hidden overflow
-    this.axis.x.isOverflowing = elOverflowX === "hidden" ? false : this.axis.x.isOverflowing;
-    this.axis.y.isOverflowing = elOverflowY === "hidden" ? false : this.axis.y.isOverflowing;
+    this.axis.x.isOverflowing =
+      elOverflowX === 'hidden' ? false : this.axis.x.isOverflowing;
+    this.axis.y.isOverflowing =
+      elOverflowY === 'hidden' ? false : this.axis.y.isOverflowing;
 
-    this.axis.x.forceVisible = this.options.forceVisible === "x" || this.options.forceVisible === true;
-    this.axis.y.forceVisible = this.options.forceVisible === "y" || this.options.forceVisible === true;
+    this.axis.x.forceVisible =
+      this.options.forceVisible === 'x' || this.options.forceVisible === true;
+    this.axis.y.forceVisible =
+      this.options.forceVisible === 'y' || this.options.forceVisible === true;
 
     this.hideNativeScrollbar();
 
     // Set isOverflowing to false if scrollbar is not necessary (content is shorter than offset)
-    const offsetForXScrollbar = this.axis.x.isOverflowing
+    let offsetForXScrollbar = this.axis.x.isOverflowing
       ? this.scrollbarWidth
       : 0;
-    const offsetForYScrollbar = this.axis.y.isOverflowing
+    let offsetForYScrollbar = this.axis.y.isOverflowing
       ? this.scrollbarWidth
       : 0;
 
-    this.axis.x.isOverflowing = this.axis.x.isOverflowing
-      && contentElScrollWidth > contentWrapperElOffsetWidth - offsetForYScrollbar;
-    this.axis.y.isOverflowing = this.axis.y.isOverflowing
-      && contentElScrollHeight
-      > contentWrapperElOffsetHeight - offsetForXScrollbar;
+    this.axis.x.isOverflowing =
+      this.axis.x.isOverflowing &&
+      contentElScrollWidth > contentWrapperElOffsetWidth - offsetForYScrollbar;
+    this.axis.y.isOverflowing =
+      this.axis.y.isOverflowing &&
+      contentElScrollHeight >
+      contentWrapperElOffsetHeight - offsetForXScrollbar;
 
-    this.axis.x.scrollbar.size = this.getScrollbarSize("x");
-    this.axis.y.scrollbar.size = this.getScrollbarSize("y");
+    this.axis.x.scrollbar.size = this.getScrollbarSize('x');
+    this.axis.y.scrollbar.size = this.getScrollbarSize('y');
 
     this.axis.x.scrollbar.el.style.width = `${this.axis.x.scrollbar.size}px`;
     this.axis.y.scrollbar.el.style.height = `${this.axis.y.scrollbar.size}px`;
 
-    this.positionScrollbar("x");
-    this.positionScrollbar("y");
+    this.positionScrollbar('x');
+    this.positionScrollbar('y');
 
-    this.toggleTrackVisibility("x");
-    this.toggleTrackVisibility("y");
+    this.toggleTrackVisibility('x');
+    this.toggleTrackVisibility('y');
   }
 
   /**
    * Calculate scrollbar size
    */
-  getScrollbarSize(axis = "y") {
+  getScrollbarSize(axis = 'y') {
     if (!this.axis[axis].isOverflowing) {
       return 0;
     }
@@ -412,12 +424,12 @@ export default class SimpleBar {
     const trackSize = this.axis[axis].track.el[this.axis[axis].offsetSizeAttr];
     let scrollbarSize;
 
-    const scrollbarRatio = trackSize / contentSize;
+    let scrollbarRatio = trackSize / contentSize;
 
     // Calculate new height/position of drag handle.
     scrollbarSize = Math.max(
       ~~(scrollbarRatio * trackSize),
-      this.options.scrollbarMinSize,
+      this.options.scrollbarMinSize
     );
 
     if (this.options.scrollbarMaxSize) {
@@ -427,7 +439,7 @@ export default class SimpleBar {
     return scrollbarSize;
   }
 
-  positionScrollbar(axis = "y") {
+  positionScrollbar(axis = 'y') {
     if (!this.axis[axis].isOverflowing) {
       return;
     }
@@ -435,55 +447,60 @@ export default class SimpleBar {
     const contentSize = this.contentWrapperEl[this.axis[axis].scrollSizeAttr];
     const trackSize = this.axis[axis].track.el[this.axis[axis].offsetSizeAttr];
     const hostSize = parseInt(this.elStyles[this.axis[axis].sizeAttr], 10);
-    const { scrollbar } = this.axis[axis];
+    const scrollbar = this.axis[axis].scrollbar;
 
     let scrollOffset = this.contentWrapperEl[this.axis[axis].scrollOffsetAttr];
-    scrollOffset = axis === "x"
-        && this.isRtl
-        && SimpleBar.getRtlHelpers().isRtlScrollingInverted
-      ? -scrollOffset
-      : scrollOffset;
-    const scrollPourcent = scrollOffset / (contentSize - hostSize);
+    scrollOffset =
+      axis === 'x' &&
+        this.isRtl &&
+        SimpleBar.getRtlHelpers().isRtlScrollingInverted
+        ? -scrollOffset
+        : scrollOffset;
+    let scrollPourcent = scrollOffset / (contentSize - hostSize);
 
     let handleOffset = ~~((trackSize - scrollbar.size) * scrollPourcent);
-    handleOffset = axis === "x"
-        && this.isRtl
-        && SimpleBar.getRtlHelpers().isRtlScrollbarInverted
-      ? handleOffset + (trackSize - scrollbar.size)
-      : handleOffset;
-
-    scrollbar.el.style.transform = axis === "x"
-      ? `translate3d(${handleOffset}px, 0, 0)`
-      : `translate3d(0, ${handleOffset}px, 0)`;
+    handleOffset =
+      axis === 'x' &&
+        this.isRtl &&
+        SimpleBar.getRtlHelpers().isRtlScrollbarInverted
+        ? handleOffset + (trackSize - scrollbar.size)
+        : handleOffset;
+
+    scrollbar.el.style.transform =
+      axis === 'x'
+        ? `translate3d(${handleOffset}px, 0, 0)`
+        : `translate3d(0, ${handleOffset}px, 0)`;
   }
 
-  toggleTrackVisibility(axis = "y") {
+  toggleTrackVisibility(axis = 'y') {
     const track = this.axis[axis].track.el;
     const scrollbar = this.axis[axis].scrollbar.el;
 
     if (this.axis[axis].isOverflowing || this.axis[axis].forceVisible) {
-      track.style.visibility = "visible";
-      this.contentWrapperEl.style[this.axis[axis].overflowAttr] = "scroll";
+      track.style.visibility = 'visible';
+      this.contentWrapperEl.style[this.axis[axis].overflowAttr] = 'scroll';
     } else {
-      track.style.visibility = "hidden";
-      this.contentWrapperEl.style[this.axis[axis].overflowAttr] = "hidden";
+      track.style.visibility = 'hidden';
+      this.contentWrapperEl.style[this.axis[axis].overflowAttr] = 'hidden';
     }
 
     // Even if forceVisible is enabled, scrollbar itself should be hidden
     if (this.axis[axis].isOverflowing) {
-      scrollbar.style.display = "block";
+      scrollbar.style.display = 'block';
     } else {
-      scrollbar.style.display = "none";
+      scrollbar.style.display = 'none';
     }
   }
 
   hideNativeScrollbar() {
-    this.offsetEl.style[this.isRtl ? "left" : "right"] = this.axis.y.isOverflowing || this.axis.y.forceVisible
-      ? `-${this.scrollbarWidth}px`
-      : 0;
-    this.offsetEl.style.bottom = this.axis.x.isOverflowing || this.axis.x.forceVisible
-      ? `-${this.scrollbarWidth}px`
-      : 0;
+    this.offsetEl.style[this.isRtl ? 'left' : 'right'] =
+      this.axis.y.isOverflowing || this.axis.y.forceVisible
+        ? `-${this.scrollbarWidth}px`
+        : 0;
+    this.offsetEl.style.bottom =
+      this.axis.x.isOverflowing || this.axis.x.forceVisible
+        ? `-${this.scrollbarWidth}px`
+        : 0;
   }
 
   /**
@@ -504,8 +521,8 @@ export default class SimpleBar {
 
   scrollX = () => {
     if (this.axis.x.isOverflowing) {
-      this.showScrollbar("x");
-      this.positionScrollbar("x");
+      this.showScrollbar('x');
+      this.positionScrollbar('x');
     }
 
     this.scrollXTicking = false;
@@ -513,32 +530,32 @@ export default class SimpleBar {
 
   scrollY = () => {
     if (this.axis.y.isOverflowing) {
-      this.showScrollbar("y");
-      this.positionScrollbar("y");
+      this.showScrollbar('y');
+      this.positionScrollbar('y');
     }
 
     this.scrollYTicking = false;
   };
 
   onMouseEnter = () => {
-    this.showScrollbar("x");
-    this.showScrollbar("y");
+    this.showScrollbar('x');
+    this.showScrollbar('y');
   };
 
-  onMouseMove = (e) => {
+  onMouseMove = e => {
     this.mouseX = e.clientX;
     this.mouseY = e.clientY;
 
     if (this.axis.x.isOverflowing || this.axis.x.forceVisible) {
-      this.onMouseMoveForAxis("x");
+      this.onMouseMoveForAxis('x');
     }
 
     if (this.axis.y.isOverflowing || this.axis.y.forceVisible) {
-      this.onMouseMoveForAxis("y");
+      this.onMouseMoveForAxis('y');
     }
   };
 
-  onMouseMoveForAxis(axis = "y") {
+  onMouseMoveForAxis(axis = 'y') {
     this.axis[axis].track.rect = this.axis[
       axis
     ].track.el.getBoundingClientRect();
@@ -547,7 +564,7 @@ export default class SimpleBar {
     ].scrollbar.el.getBoundingClientRect();
 
     const isWithinScrollbarBoundsX = this.isWithinBounds(
-      this.axis[axis].scrollbar.rect,
+      this.axis[axis].scrollbar.rect
     );
 
     if (isWithinScrollbarBoundsX) {
@@ -568,18 +585,18 @@ export default class SimpleBar {
     this.onMouseMove.cancel();
 
     if (this.axis.x.isOverflowing || this.axis.x.forceVisible) {
-      this.onMouseLeaveForAxis("x");
+      this.onMouseLeaveForAxis('x');
     }
 
     if (this.axis.y.isOverflowing || this.axis.y.forceVisible) {
-      this.onMouseLeaveForAxis("y");
+      this.onMouseLeaveForAxis('y');
     }
 
     this.mouseX = -1;
     this.mouseY = -1;
   };
 
-  onMouseLeaveForAxis(axis = "y") {
+  onMouseLeaveForAxis(axis = 'y') {
     this.axis[axis].track.el.classList.remove(this.classNames.hover);
     this.axis[axis].scrollbar.el.classList.remove(this.classNames.hover);
   }
@@ -594,8 +611,8 @@ export default class SimpleBar {
   /**
    * Show scrollbar
    */
-  showScrollbar(axis = "y") {
-    const scrollbar = this.axis[axis].scrollbar.el;
+  showScrollbar(axis = 'y') {
+    let scrollbar = this.axis[axis].scrollbar.el;
 
     if (!this.axis[axis].isVisible) {
       scrollbar.classList.add(this.classNames.visible);
@@ -625,9 +642,8 @@ export default class SimpleBar {
     }
   };
 
-  onPointerEvent = (e) => {
-    let isWithinTrackXBounds; let
-      isWithinTrackYBounds;
+  onPointerEvent = e => {
+    let isWithinTrackXBounds, isWithinTrackYBounds;
 
     this.axis.x.track.rect = this.axis.x.track.el.getBoundingClientRect();
     this.axis.y.track.rect = this.axis.y.track.el.getBoundingClientRect();
@@ -648,14 +664,14 @@ export default class SimpleBar {
       // Prevent event leaking
       e.stopPropagation();
 
-      if (e.type === "mousedown") {
+      if (e.type === 'mousedown') {
         if (isWithinTrackXBounds) {
           this.axis.x.scrollbar.rect = this.axis.x.scrollbar.el.getBoundingClientRect();
 
           if (this.isWithinBounds(this.axis.x.scrollbar.rect)) {
-            this.onDragStart(e, "x");
+            this.onDragStart(e, 'x');
           } else {
-            this.onTrackClick(e, "x");
+            this.onTrackClick(e, 'x');
           }
         }
 
@@ -663,9 +679,9 @@ export default class SimpleBar {
           this.axis.y.scrollbar.rect = this.axis.y.scrollbar.el.getBoundingClientRect();
 
           if (this.isWithinBounds(this.axis.y.scrollbar.rect)) {
-            this.onDragStart(e, "y");
+            this.onDragStart(e, 'y');
           } else {
-            this.onTrackClick(e, "y");
+            this.onTrackClick(e, 'y');
           }
         }
       }
@@ -675,23 +691,24 @@ export default class SimpleBar {
   /**
    * on scrollbar handle drag movement starts
    */
-  onDragStart(e, axis = "y") {
+  onDragStart(e, axis = 'y') {
     const elDocument = getElementDocument(this.el);
     const elWindow = getElementWindow(this.el);
-    const { scrollbar } = this.axis[axis];
+    const scrollbar = this.axis[axis].scrollbar;
 
     // Measure how far the user's mouse is from the top of the scrollbar drag handle.
-    const eventOffset = axis === "y" ? e.pageY : e.pageX;
-    this.axis[axis].dragOffset = eventOffset - scrollbar.rect[this.axis[axis].offsetAttr];
+    const eventOffset = axis === 'y' ? e.pageY : e.pageX;
+    this.axis[axis].dragOffset =
+      eventOffset - scrollbar.rect[this.axis[axis].offsetAttr];
     this.draggedAxis = axis;
 
     this.el.classList.add(this.classNames.dragging);
 
-    elDocument.addEventListener("mousemove", this.drag, true);
-    elDocument.addEventListener("mouseup", this.onEndDrag, true);
+    elDocument.addEventListener('mousemove', this.drag, true);
+    elDocument.addEventListener('mouseup', this.onEndDrag, true);
     if (this.removePreventClickId === null) {
-      elDocument.addEventListener("click", this.preventClick, true);
-      elDocument.addEventListener("dblclick", this.preventClick, true);
+      elDocument.addEventListener('click', this.preventClick, true);
+      elDocument.addEventListener('dblclick', this.preventClick, true);
     } else {
       elWindow.clearTimeout(this.removePreventClickId);
       this.removePreventClickId = null;
@@ -701,46 +718,49 @@ export default class SimpleBar {
   /**
    * Drag scrollbar handle
    */
-  drag = (e) => {
+  drag = e => {
     let eventOffset;
-    const { track } = this.axis[this.draggedAxis];
+    const track = this.axis[this.draggedAxis].track;
     const trackSize = track.rect[this.axis[this.draggedAxis].sizeAttr];
-    const { scrollbar } = this.axis[this.draggedAxis];
+    const scrollbar = this.axis[this.draggedAxis].scrollbar;
     const contentSize = this.contentWrapperEl[
       this.axis[this.draggedAxis].scrollSizeAttr
     ];
     const hostSize = parseInt(
       this.elStyles[this.axis[this.draggedAxis].sizeAttr],
-      10,
+      10
     );
 
     e.preventDefault();
     e.stopPropagation();
 
-    if (this.draggedAxis === "y") {
+    if (this.draggedAxis === 'y') {
       eventOffset = e.pageY;
     } else {
       eventOffset = e.pageX;
     }
 
     // Calculate how far the user's mouse is from the top/left of the scrollbar (minus the dragOffset).
-    const dragPos = eventOffset
-      - track.rect[this.axis[this.draggedAxis].offsetAttr]
-      - this.axis[this.draggedAxis].dragOffset;
+    let dragPos =
+      eventOffset -
+      track.rect[this.axis[this.draggedAxis].offsetAttr] -
+      this.axis[this.draggedAxis].dragOffset;
     // Convert the mouse position into a percentage of the scrollbar height/width.
-    const dragPerc = dragPos / (trackSize - scrollbar.size);
+    let dragPerc = dragPos / (trackSize - scrollbar.size);
 
     // Scroll the content by the same percentage.
     let scrollPos = dragPerc * (contentSize - hostSize);
 
     // Fix browsers inconsistency on RTL
-    if (this.draggedAxis === "x") {
-      scrollPos = this.isRtl && SimpleBar.getRtlHelpers().isRtlScrollbarInverted
-        ? scrollPos - (trackSize + scrollbar.size)
-        : scrollPos;
-      scrollPos = this.isRtl && SimpleBar.getRtlHelpers().isRtlScrollingInverted
-        ? -scrollPos
-        : scrollPos;
+    if (this.draggedAxis === 'x') {
+      scrollPos =
+        this.isRtl && SimpleBar.getRtlHelpers().isRtlScrollbarInverted
+          ? scrollPos - (trackSize + scrollbar.size)
+          : scrollPos;
+      scrollPos =
+        this.isRtl && SimpleBar.getRtlHelpers().isRtlScrollingInverted
+          ? -scrollPos
+          : scrollPos;
     }
 
     this.contentWrapperEl[
@@ -751,7 +771,7 @@ export default class SimpleBar {
   /**
    * End scroll handle drag
    */
-  onEndDrag = (e) => {
+  onEndDrag = e => {
     const elDocument = getElementDocument(this.el);
     const elWindow = getElementWindow(this.el);
     e.preventDefault();
@@ -759,13 +779,13 @@ export default class SimpleBar {
 
     this.el.classList.remove(this.classNames.dragging);
 
-    elDocument.removeEventListener("mousemove", this.drag, true);
-    elDocument.removeEventListener("mouseup", this.onEndDrag, true);
+    elDocument.removeEventListener('mousemove', this.drag, true);
+    elDocument.removeEventListener('mouseup', this.onEndDrag, true);
     this.removePreventClickId = elWindow.setTimeout(() => {
       // Remove these asynchronously so we still suppress click events
       // generated simultaneously with mouseup.
-      elDocument.removeEventListener("click", this.preventClick, true);
-      elDocument.removeEventListener("dblclick", this.preventClick, true);
+      elDocument.removeEventListener('click', this.preventClick, true);
+      elDocument.removeEventListener('dblclick', this.preventClick, true);
       this.removePreventClickId = null;
     });
   };
@@ -773,25 +793,26 @@ export default class SimpleBar {
   /**
    * Handler to ignore click events during drag
    */
-  preventClick = (e) => {
+  preventClick = e => {
     e.preventDefault();
     e.stopPropagation();
   };
 
-  onTrackClick(e, axis = "y") {
+  onTrackClick(e, axis = 'y') {
     if (!this.options.clickOnTrack) return;
 
     const elWindow = getElementWindow(this.el);
     this.axis[axis].scrollbar.rect = this.axis[
       axis
     ].scrollbar.el.getBoundingClientRect();
-    const { scrollbar } = this.axis[axis];
+    const scrollbar = this.axis[axis].scrollbar;
     const scrollbarOffset = scrollbar.rect[this.axis[axis].offsetAttr];
     const hostSize = parseInt(this.elStyles[this.axis[axis].sizeAttr], 10);
     let scrolled = this.contentWrapperEl[this.axis[axis].scrollOffsetAttr];
-    const t = axis === "y"
-      ? this.mouseY - scrollbarOffset
-      : this.mouseX - scrollbarOffset;
+    const t =
+      axis === 'y'
+        ? this.mouseY - scrollbarOffset
+        : this.mouseX - scrollbarOffset;
     const dir = t < 0 ? -1 : 1;
     const scrollSize = dir === -1 ? scrolled - hostSize : scrolled + hostSize;
 
@@ -800,16 +821,18 @@ export default class SimpleBar {
         if (scrolled > scrollSize) {
           scrolled -= this.options.clickOnTrackSpeed;
           this.contentWrapperEl.scrollTo({
-            [this.axis[axis].offsetAttr]: scrolled,
+            [this.axis[axis].offsetAttr]: scrolled
+          });
+          elWindow.requestAnimationFrame(scrollTo);
+        }
+      } else {
+        if (scrolled < scrollSize) {
+          scrolled += this.options.clickOnTrackSpeed;
+          this.contentWrapperEl.scrollTo({
+            [this.axis[axis].offsetAttr]: scrolled
           });
           elWindow.requestAnimationFrame(scrollTo);
         }
-      } else if (scrolled < scrollSize) {
-        scrolled += this.options.clickOnTrackSpeed;
-        this.contentWrapperEl.scrollTo({
-          [this.axis[axis].offsetAttr]: scrolled,
-        });
-        elWindow.requestAnimationFrame(scrollTo);
       }
     };
 
@@ -835,14 +858,15 @@ export default class SimpleBar {
     try {
       // Detect browsers supporting CSS scrollbar styling and do not calculate
       if (
-        getComputedStyle(this.contentWrapperEl, "::-webkit-scrollbar")
-          .display === "none"
-        || "scrollbarWidth" in document.documentElement.style
-        || "-ms-overflow-style" in document.documentElement.style
+        getComputedStyle(this.contentWrapperEl, '::-webkit-scrollbar')
+          .display === 'none' ||
+        'scrollbarWidth' in document.documentElement.style ||
+        '-ms-overflow-style' in document.documentElement.style
       ) {
         return 0;
+      } else {
+        return scrollbarWidth(this.el);
       }
-      return scrollbarWidth(this.el);
     } catch (e) {
       return scrollbarWidth(this.el);
     }
@@ -852,28 +876,28 @@ export default class SimpleBar {
     const elWindow = getElementWindow(this.el);
     // Event listeners
     if (this.options.autoHide) {
-      this.el.removeEventListener("mouseenter", this.onMouseEnter);
+      this.el.removeEventListener('mouseenter', this.onMouseEnter);
     }
 
-    ["mousedown", "click", "dblclick"].forEach((e) => {
+    ['mousedown', 'click', 'dblclick'].forEach(e => {
       this.el.removeEventListener(e, this.onPointerEvent, true);
     });
 
-    ["touchstart", "touchend", "touchmove"].forEach((e) => {
+    ['touchstart', 'touchend', 'touchmove'].forEach(e => {
       this.el.removeEventListener(e, this.onPointerEvent, {
         capture: true,
-        passive: true,
+        passive: true
       });
     });
 
-    this.el.removeEventListener("mousemove", this.onMouseMove);
-    this.el.removeEventListener("mouseleave", this.onMouseLeave);
+    this.el.removeEventListener('mousemove', this.onMouseMove);
+    this.el.removeEventListener('mouseleave', this.onMouseLeave);
 
     if (this.contentWrapperEl) {
-      this.contentWrapperEl.removeEventListener("scroll", this.onScroll);
+      this.contentWrapperEl.removeEventListener('scroll', this.onScroll);
     }
 
-    elWindow.removeEventListener("resize", this.onWindowResize);
+    elWindow.removeEventListener('resize', this.onWindowResize);
 
     if (this.mutationObserver) {
       this.mutationObserver.disconnect();
@@ -903,10 +927,10 @@ export default class SimpleBar {
    */
   isWithinBounds(bbox) {
     return (
-      this.mouseX >= bbox.left
-      && this.mouseX <= bbox.left + bbox.width
-      && this.mouseY >= bbox.top
-      && this.mouseY <= bbox.top + bbox.height
+      this.mouseX >= bbox.left &&
+      this.mouseX <= bbox.left + bbox.width &&
+      this.mouseY >= bbox.top &&
+      this.mouseY <= bbox.top + bbox.height
     );
   }
 
@@ -914,10 +938,13 @@ export default class SimpleBar {
    * Find element children matches query
    */
   findChild(el, query) {
-    const matches = el.matches
-      || el.webkitMatchesSelector
-      || el.mozMatchesSelector
-      || el.msMatchesSelector;
-    return Array.prototype.filter.call(el.children, (child) => matches.call(child, query))[0];
+    const matches =
+      el.matches ||
+      el.webkitMatchesSelector ||
+      el.mozMatchesSelector ||
+      el.msMatchesSelector;
+    return Array.prototype.filter.call(el.children, child =>
+      matches.call(child, query)
+    )[0];
   }
 }