improve code

packages/overlayscrollbars/dist/overlayscrollbars.esm.js

@@ -387,17 +387,18 @@ const g = window.clearTimeout;
 const h = /[^\x20\t\r\n\f]+/g;
 
 const classListAction = (t, n, o) => {
-  let s;
-  let e = 0;
-  let c = false;
-  if (t && n && isString(n)) {
-    const r = n.match(h) || [];
-    c = r.length > 0;
-    while (s = r[e++]) {
-      c = !!o(t.classList, s) && c;
+  const s = t && t.classList;
+  let e;
+  let c = 0;
+  let r = false;
+  if (s && n && isString(n)) {
+    const t = n.match(h) || [];
+    r = t.length > 0;
+    while (e = t[c++]) {
+      r = !!o(s, e) && r;
     }
   }
-  return c;
+  return r;
 };
 
 const hasClass = (t, n) => classListAction(t, n, ((t, n) => t.contains(n)));
@@ -1108,8 +1109,11 @@ const bt = {
       return [ arrangeViewport, undoViewportArrange ];
     },
     j: () => {
-      let t = windowSize();
-      let n = getWindowDPR();
+      let t = {
+        w: 0,
+        h: 0
+      };
+      let n = 0;
       return (o, s, e) => {
         const c = windowSize();
         const r = {
@@ -1130,7 +1134,7 @@ const bt = {
         const a = getWindowDPR();
         const u = i.w > 2 && i.h > 2;
         const d = !diffBiggerThanOne(l.w, l.h);
-        const f = a !== n && n > 0;
+        const f = a !== n && a > 0;
         const _ = u && d && f;
         if (_) {
           const [t, n] = s();
@@ -2142,7 +2146,7 @@ const createStructureSetupObservers = (t, n, o) => {
         kt: (t, n) => {
           const {target: o, attributeName: s} = t;
           const e = !n && s ? liesBetween(o, Pt, Lt) : false;
-          return e || !!ignoreMutationFromOptions(t);
+          return e || !!closest(o, `.${B}`) || !!ignoreMutationFromOptions(t);
         }
       });
     }

packages/overlayscrollbars/dist/overlayscrollbars.js

@@ -379,17 +379,18 @@
   var sr = window.clearTimeout;
   var dr = /[^\x20\t\r\n\f]+/g;
   var gr = function classListAction(r, a, e) {
-    var n;
-    var t = 0;
-    var i = false;
-    if (r && a && l(a)) {
-      var v = a.match(dr) || [];
-      i = v.length > 0;
-      while (n = v[t++]) {
-        i = !!e(r.classList, n) && i;
+    var n = r && r.classList;
+    var t;
+    var i = 0;
+    var v = false;
+    if (n && a && l(a)) {
+      var o = a.match(dr) || [];
+      v = o.length > 0;
+      while (t = o[i++]) {
+        v = !!e(n, t) && v;
       }
     }
-    return i;
+    return v;
   };
   var hr = function hasClass(r, a) {
     return gr(r, a, (function(r, a) {
@@ -1062,8 +1063,11 @@
       return [ o, u ];
     },
     j: function _envWindowZoom() {
-      var r = Ir();
-      var a = te();
+      var r = {
+        w: 0,
+        h: 0
+      };
+      var a = 0;
       return function(e, n, t) {
         var i = Ir();
         var v = {
@@ -1084,7 +1088,7 @@
         var f = te();
         var l = o.w > 2 && o.h > 2;
         var c = !ie(u.w, u.h);
-        var s = f !== a && a > 0;
+        var s = f !== a && f > 0;
         var d = l && c && s;
         if (d) {
           var g = n(), h = g[0], p = g[1];
@@ -2095,7 +2099,7 @@
           Br: function _ignoreContentChange(r, a) {
             var e = r.target, n = r.attributeName;
             var t = !a && n ? U(e, Ge, Xe) : false;
-            return t || !!S(r);
+            return t || !!q(e, "." + wa) || !!S(r);
           }
         });
       }

packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts

@@ -4,6 +4,7 @@ import {
   createDiv,
   each,
   isEmptyArray,
+  noop,
   on,
   push,
   removeClass,
@@ -11,6 +12,7 @@ import {
   runEachAndClear,
   setT,
   stopPropagation,
+  style,
 } from 'support';
 import {
   classNameScrollbar,
@@ -30,6 +32,7 @@ import type {
   ScrollbarsInitializationStrategy,
   ScrollbarsDynamicInitializationElement,
 } from 'setups/scrollbarsSetup/scrollbarsSetup.initialization';
+import { StyleObject } from 'typings';
 
 export interface ScrollbarStructure {
   _scrollbar: HTMLElement;
@@ -40,7 +43,16 @@ export interface ScrollbarStructure {
 export interface ScrollbarsSetupElement {
   _scrollbarStructures: ScrollbarStructure[];
   _clone: () => ScrollbarStructure;
-  _addRemoveClass: (classNames: string, add?: boolean) => void;
+  _addRemoveClass: (
+    classNames: string,
+    add?: boolean,
+    elm?: (scrollbarStructure: ScrollbarStructure) => HTMLElement | false | null | undefined
+  ) => void;
+  _handleStyle: (
+    elmStyle: (
+      scrollbarStructure: ScrollbarStructure
+    ) => [HTMLElement | false | null | undefined, StyleObject]
+  ) => void;
   // _removeClass: (classNames: string) => void;
   /*
   _addEventListener: () => void;
@@ -89,11 +101,23 @@ export const createScrollbarsSetupElements = (
   const scrollbarsAddRemoveClass = (
     scrollbarStructures: ScrollbarStructure[],
     classNames: string,
-    add?: boolean
+    add?: boolean,
+    elm?: (scrollbarStructure: ScrollbarStructure) => HTMLElement | false | null | undefined
   ) => {
     const action = add ? addClass : removeClass;
     each(scrollbarStructures, (scrollbarStructure) => {
-      action(scrollbarStructure._scrollbar, classNames);
+      action((elm || noop)(scrollbarStructure) || scrollbarStructure._scrollbar, classNames);
+    });
+  };
+  const scrollbarsHandleStyle = (
+    scrollbarStructures: ScrollbarStructure[],
+    elmStyle: (
+      scrollbarStructure: ScrollbarStructure
+    ) => [HTMLElement | false | null | undefined, StyleObject]
+  ) => {
+    each(scrollbarStructures, (scrollbarStructure) => {
+      const [elm, styles] = elmStyle(scrollbarStructure);
+      style(elm, styles);
     });
   };
   const destroyFns: (() => void)[] = [];
@@ -159,11 +183,13 @@ export const createScrollbarsSetupElements = (
         _scrollbarStructures: horizontalScrollbars,
         _clone: generateHorizontalScrollbarStructure,
         _addRemoveClass: addRemoveClassHorizontal,
+        _handleStyle: scrollbarsHandleStyle.bind(0, horizontalScrollbars),
       },
       _vertical: {
         _scrollbarStructures: verticalScrollbars,
         _clone: generateVerticalScrollbarStructure,
         _addRemoveClass: addRemoveClassVertical,
+        _handleStyle: scrollbarsHandleStyle.bind(0, verticalScrollbars),
       },
     },
     appendElements,

packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts

@@ -1,8 +1,21 @@
-import { rAF, cAF, isFunction, on, runEachAndClear, setT, clearT } from 'support';
+import {
+  rAF,
+  cAF,
+  isFunction,
+  on,
+  runEachAndClear,
+  setT,
+  clearT,
+  parent,
+  scrollLeft,
+  scrollTop,
+} from 'support';
 import { createState, createOptionCheck } from 'setups/setups';
 import {
   createScrollbarsSetupElements,
+  ScrollbarsSetupElement,
   ScrollbarsSetupElementsObj,
+  ScrollbarStructure,
 } from 'setups/scrollbarsSetup/scrollbarsSetup.elements';
 import {
   classNamesScrollbarVisible,
@@ -17,7 +30,7 @@ import type {
 } from 'options';
 import type { Setup, StructureSetupState, StructureSetupStaticState } from 'setups';
 import type { InitializationTarget } from 'initialization';
-import type { OverflowStyle } from 'typings';
+import type { OverflowStyle, StyleObject } from 'typings';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface ScrollbarsSetupState {}
@@ -27,6 +40,7 @@ export interface ScrollbarsSetupStaticState {
   _appendElements: () => void;
 }
 
+const { min } = Math;
 const createSelfCancelTimeout = (timeout?: number | (() => number)) => {
   let id: number;
   const setTFn = timeout ? setT : rAF!;
@@ -41,6 +55,105 @@ const createSelfCancelTimeout = (timeout?: number | (() => number)) => {
   ] as [timeout: (callback: () => any) => void, clear: () => void];
 };
 
+const refreshScrollbarHandleLength = (
+  setStyleFn: ScrollbarsSetupElement['_handleStyle'],
+  structureSetupState: StructureSetupState,
+  isHorizontal?: boolean
+) => {
+  const { _overflowAmount, _overflowEdge } = structureSetupState;
+  const axis = isHorizontal ? 'x' : 'y';
+  const viewportSize = _overflowEdge[axis];
+  const overflowAmount = _overflowAmount[axis];
+  const handleRatio = min(1, viewportSize / (viewportSize + overflowAmount));
+
+  setStyleFn((structure) => [
+    structure._handle,
+    {
+      [isHorizontal ? 'width' : 'height']: `${(handleRatio * 100).toFixed(3)}%`,
+    },
+  ]);
+};
+
+const refreshScrollbarHandlePosition = (
+  setStyleFn: (styles: StyleObject) => void,
+  structureSetupState: StructureSetupState,
+  isHorizontal?: boolean
+) => {
+  /*
+  //measure the handle length to respect min & max length
+  var handleLength = scrollbarVarsInfo._handleLength;
+  var trackLength = scrollbarVars._track[0]['offset' + scrollbarVars._Width_Height];
+  var handleTrackDiff = trackLength - handleLength;
+  var handleCSS = {};
+  var transformOffset;
+  var translateValue;
+
+  //DONT use the variable '_contentScrollSizeCache[scrollbarVars._w_h]' instead of '_viewportElement[0]['scroll' + scrollbarVars._Width_Height]'
+  // because its a bit behind during the small delay when content size updates
+  //(delay = mutationObserverContentLag, if its 0 then this var could be used)
+  var maxScroll =
+    (_viewportElementNative[_strScroll + scrollbarVars._Width_Height] -
+      _viewportElementNative['client' + scrollbarVars._Width_Height]) *
+    (_rtlScrollBehavior.n && isRTLisHorizontal ? -1 : 1); //* -1 if rtl scroll max is negative
+  var getScrollRatio = function (base) {
+    return isNaN(base / maxScroll) ? 0 : MATH.max(0, MATH.min(1, base / maxScroll));
+  };
+  var getHandleOffset = function (scrollRatio) {
+    var offset = handleTrackDiff * scrollRatio;
+    offset = isNaN(offset) ? 0 : offset;
+    offset =
+      isRTLisHorizontal && !_rtlScrollBehavior.i ? trackLength - handleLength - offset : offset;
+    offset = MATH.max(0, offset);
+    return offset;
+  };
+  var scrollRatio = getScrollRatio(nativeScroll);
+  var unsnappedScrollRatio = getScrollRatio(currentScroll);
+  var handleOffset = getHandleOffset(unsnappedScrollRatio);
+  var snappedHandleOffset = getHandleOffset(scrollRatio);
+
+  scrollbarVarsInfo._maxScroll = maxScroll;
+  scrollbarVarsInfo._currentScroll = nativeScroll;
+  scrollbarVarsInfo._currentScrollRatio = scrollRatio;
+
+  if (_supportTransform) {
+    transformOffset = isRTLisHorizontal
+      ? -(trackLength - handleLength - handleOffset)
+      : handleOffset; //in px
+    //transformOffset = (transformOffset / trackLength * 100) * (trackLength / handleLength); //in %
+    translateValue = isHorizontal
+      ? strTranslateBrace + transformOffset + 'px, 0)'
+      : strTranslateBrace + '0, ' + transformOffset + 'px)';
+
+    handleCSS[strTransform] = translateValue;
+
+    //apply or clear up transition
+    if (_supportTransition)
+      handleCSS[strTransition] =
+        transition && MATH.abs(handleOffset - scrollbarVarsInfo._handleOffset) > 1
+          ? getCSSTransitionString(scrollbarVars._handle) +
+            ', ' +
+            (strTransform + _strSpace + transitionDuration + 'ms')
+          : _strEmpty;
+  } else handleCSS[scrollbarVars._left_top] = handleOffset;
+
+  //only apply css if offset has changed and overflow exists.
+  if (!nativeOverlayScrollbarsAreActive()) {
+    scrollbarVars._handle.css(handleCSS);
+
+    //clear up transition
+    if (_supportTransform && _supportTransition && transition) {
+      scrollbarVars._handle.one(_strTransitionEndEvent, function () {
+        if (!_destroyed) scrollbarVars._handle.css(strTransition, _strEmpty);
+      });
+    }
+  }
+
+  scrollbarVarsInfo._handleOffset = handleOffset;
+  scrollbarVarsInfo._snappedHandleOffset = snappedHandleOffset;
+  scrollbarVarsInfo._trackLength = trackLength;
+  */
+};
+
 export const createScrollbarsSetup = (
   target: InitializationTarget,
   options: ReadonlyOSOptions,
@@ -62,10 +175,10 @@ export const createScrollbarsSetup = (
     target,
     structureSetupState._elements
   );
-  const { _host, _viewport } = structureSetupState._elements;
+  const { _host, _viewport, _viewportIsTarget, _isBody } = structureSetupState._elements;
   const { _horizontal, _vertical } = elements;
-  const { _addRemoveClass: addRemoveClassHorizontal } = _horizontal;
-  const { _addRemoveClass: addRemoveClassVertical } = _vertical;
+  const { _addRemoveClass: addRemoveClassHorizontal, _handleStyle: styleHorizontal } = _horizontal;
+  const { _addRemoveClass: addRemoveClassVertical, _handleStyle: styleVertical } = _vertical;
   const manageScrollbarsAutoHide = (removeAutoHide: boolean, delayless?: boolean) => {
     clearAutoTimeout();
     if (removeAutoHide) {
@@ -131,6 +244,7 @@ export const createScrollbarsSetup = (
       const { _overflowEdgeChanged, _overflowAmountChanged, _overflowStyleChanged } =
         structureUpdateHints;
       const checkOption = createOptionCheck(options, changedOptions, force);
+      const currStructureSetupState = structureSetupState();
 
       const [visibility, visibilityChanged] =
         checkOption<ScrollbarVisibilityBehavior>('scrollbars.visibility');
@@ -142,7 +256,7 @@ export const createScrollbarsSetup = (
       );
       const [touchSupport, touchSupportChanged] = checkOption<boolean>('scrollbars.touchSupport');
 
-      const updateHandleSize = _overflowEdgeChanged || _overflowAmountChanged;
+      const updateHandle = _overflowEdgeChanged || _overflowAmountChanged;
       const updateVisibility = _overflowStyleChanged || visibilityChanged;
 
       const setScrollbarVisibility = (
@@ -158,7 +272,7 @@ export const createScrollbarsSetup = (
       globalAutoHideDelay = autoHideDelay;
 
       if (updateVisibility) {
-        const { _overflowStyle } = structureSetupState();
+        const { _overflowStyle } = currStructureSetupState;
 
         const xVisible = setScrollbarVisibility(_overflowStyle.x, addRemoveClassHorizontal);
         const yVisible = setScrollbarVisibility(_overflowStyle.y, addRemoveClassVertical);
@@ -173,6 +287,10 @@ export const createScrollbarsSetup = (
         autoHideNotNever = autoHide !== 'never';
         manageScrollbarsAutoHide(!autoHideNotNever, true);
       }
+      if (updateHandle) {
+        refreshScrollbarHandleLength(styleHorizontal, currStructureSetupState, true);
+        refreshScrollbarHandleLength(styleVertical, currStructureSetupState);
+      }
     },
     scrollbarsSetupState,
     runEachAndClear.bind(0, destroyFns),

packages/overlayscrollbars/src/styles/scrollbars.scss

@@ -10,7 +10,7 @@
   transition: none;
 }
 .os-scrollbar-track {
-  pointer-events: auto;
+  pointer-events: none;
   position: relative;
   height: 100%;
   width: 100%;
@@ -18,14 +18,14 @@
   border: none !important;
 }
 .os-scrollbar-handle {
-  pointer-events: auto;
+  pointer-events: none;
   position: absolute;
   width: 100%;
   height: 100%;
 }
-.os-scrollbar-handle-off,
-.os-scrollbar-track-off {
-  pointer-events: none;
+.os-scrollbar-handle-interactive,
+.os-scrollbar-track-interactive {
+  pointer-events: auto;
 }
 .os-scrollbar-unusable,
 .os-scrollbar-unusable * {

packages/overlayscrollbars/src/support/dom/attribute.ts

@@ -61,11 +61,13 @@ export const attrClass = (
   value: string,
   add?: boolean
 ) => {
-  const currValues = attr(elm, attrName) || '';
-  const currValuesSet = new Set(currValues.split(' '));
-  currValuesSet[add ? 'add' : 'delete'](value);
+  if (value) {
+    const currValues = attr(elm, attrName) || '';
+    const currValuesSet = new Set(currValues.split(' '));
+    currValuesSet[add ? 'add' : 'delete'](value);
 
-  attr(elm, attrName, from(currValuesSet).join(' ').trim());
+    attr(elm, attrName, from(currValuesSet).join(' ').trim());
+  }
 };
 
 /**

packages/overlayscrollbars/src/support/dom/traversal.ts

@@ -74,7 +74,7 @@ const contents = (elm: InputElementType): ReadonlyArray<ChildNode> =>
  */
 const parent = (elm: InputElementType): OutputElementType => (elm ? elm.parentElement : null);
 
-export const closest = (elm: InputElementType, selector: string): OutputElementType => {
+const closest = (elm: InputElementType, selector: string): OutputElementType => {
   if (isElement(elm)) {
     const closestFn = elmPrototype.closest;
     if (closestFn) {
@@ -113,4 +113,4 @@ const liesBetween = (
     : false;
 };
 
-export { find, findFirst, is, children, contents, parent, liesBetween };
+export { find, findFirst, is, children, contents, parent, liesBetween, closest };

packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts

@@ -30,7 +30,6 @@ if (!window.ResizeObserver) {
   addPlugin(sizeObserverPlugin);
 }
 if (!OverlayScrollbars.env().scrollbarsHiding) {
-  console.log('added');
   addPlugin(scrollbarsHidingPlugin);
 }