improvements

KingSora · May 6, 2024 · 86fc032 · 86fc032
1 parent c34b826
commit 86fc032
Show file tree

Hide file tree

Showing 18 changed files with 148 additions and 98 deletions.
diff --git a/packages/overlayscrollbars/src/classnames.ts b/packages/overlayscrollbars/src/classnames.ts
@@ -22,6 +22,8 @@ export const dataAttributeHost = dataAttributePrefix;
 export const dataAttributeViewport = `${dataAttributePrefix}-viewport`;
 export const dataValueViewportOverflowXPrefix = strOverflowX;
 export const dataValueViewportOverflowYPrefix = strOverflowY;
+export const dataValueViewportOverflowVisible = 'overflowVisible';
+export const dataValueViewportOverflowHidden = 'overflowHidden';
 export const dataValueViewportArrange = 'arrange';
 export const dataValueViewportMeasuring = 'measuring';
 export const dataValueViewportScrollbarHidden = 'scrollbarHidden';

diff --git a/packages/overlayscrollbars/src/environment.ts b/packages/overlayscrollbars/src/environment.ts
@@ -2,10 +2,10 @@ import {
   createDOM,
   addClass,
   appendChildren,
-  fractionalSize,
-  clientSize,
+  getFractionalSize,
+  getClientSize,
   absoluteCoordinates,
-  offsetSize,
+  getOffsetSize,
   removeAttrs,
   removeElements,
   assignDeep,
@@ -63,9 +63,9 @@ const createEnvironment = (): Env => {
     appendChildren(document.body, measureElm);
     appendChildren(document.body, measureElm);
 
-    const cSize = clientSize(measureElm);
-    const oSize = offsetSize(measureElm);
-    const fSize = fractionalSize(measureElmChild);
+    const cSize = getClientSize(measureElm);
+    const oSize = getOffsetSize(measureElm);
+    const fSize = getFractionalSize(measureElmChild);
 
     clear && removeElements(measureElm);
 

diff --git a/packages/overlayscrollbars/src/observers/trinsicObserver.ts b/packages/overlayscrollbars/src/observers/trinsicObserver.ts
@@ -1,6 +1,6 @@
 import {
   createDiv,
-  offsetSize,
+  getOffsetSize,
   runEachAndClear,
   createCache,
   push,
@@ -71,7 +71,7 @@ export const createTrinsicObserver = (
         });
       } else {
         const onSizeChanged = () => {
-          const newSize = offsetSize(trinsicObserver);
+          const newSize = getOffsetSize(trinsicObserver);
           triggerOnTrinsicChangedCallback(newSize);
         };
         push(destroyFns, createSizeObserver(trinsicObserver, onSizeChanged)());

diff --git a/packages/overlayscrollbars/src/plugins/sizeObserverPlugin/sizeObserverPlugin.ts b/packages/overlayscrollbars/src/plugins/sizeObserverPlugin/sizeObserverPlugin.ts
@@ -1,7 +1,7 @@
 import {
   createDOM,
   appendChildren,
-  offsetSize,
+  getOffsetSize,
   addEventListener,
   addClass,
   equalWH,
@@ -42,7 +42,7 @@ export const SizeObserverPlugin = /* @__PURE__ */ (() => ({
         const expandElement = observerElementChildrenRoot.firstChild as HTMLElement;
         const expandElementChild = expandElement?.firstChild as HTMLElement;
 
-        let cacheSize = offsetSize(observerElementChildrenRoot);
+        let cacheSize = getOffsetSize(observerElementChildrenRoot);
         let currSize = cacheSize;
         let isDirty = false;
         let rAFId: number;
@@ -59,7 +59,7 @@ export const SizeObserverPlugin = /* @__PURE__ */ (() => ({
           }
         };
         const onScroll = (scrollEvent?: Event | false) => {
-          currSize = offsetSize(observerElementChildrenRoot);
+          currSize = getOffsetSize(observerElementChildrenRoot);
           isDirty = !scrollEvent || !equalWH(currSize, cacheSize);
 
           if (scrollEvent) {

diff --git a/packages/overlayscrollbars/src/setups/observersSetup/observersSetup.ts b/packages/overlayscrollbars/src/setups/observersSetup/observersSetup.ts
@@ -7,16 +7,16 @@ import {
   getDirectionIsRTL,
   each,
   equalWH,
-  fractionalSize,
+  getFractionalSize,
   isArray,
   isFunction,
   isNumber,
   isString,
   keys,
   liesBetween,
   removeAttrs,
-  scrollSize,
-  getElmentScroll,
+  getScrollSize,
+  getElementScroll,
   scrollElementTo,
   inArray,
   domRectAppeared,
@@ -94,6 +94,7 @@ export const createObserversSetup = (
     _target,
     _host,
     _viewport,
+    _scrollOffsetElement,
     _content,
     _isTextarea,
     _viewportIsTarget,
@@ -127,19 +128,19 @@ export const createObserversSetup = (
         )._undoViewportArrange;
 
       const isArranged = !_viewportIsTarget && _viewportHasClass(dataValueViewportArrange);
-      const scrollOffset = isArranged && getElmentScroll(_viewport);
+      const scrollOffset = isArranged && getElementScroll(_scrollOffsetElement);
 
       const revertMeasuring = _viewportAddRemoveClass(dataValueViewportMeasuring, true);
       const redoViewportArrange = isArranged && _undoViewportArrange && _undoViewportArrange()[0];
 
-      const contentScroll = scrollSize(_content);
-      const viewportScroll = scrollSize(_viewport);
-      const fractional = fractionalSize(_viewport);
+      const contentScroll = getScrollSize(_content);
+      const viewportScroll = getScrollSize(_viewport);
+      const fractional = getFractionalSize(_viewport);
 
-      revertMeasuring();
       redoViewportArrange && redoViewportArrange();
 
-      scrollElementTo(_viewport, scrollOffset);
+      scrollElementTo(_scrollOffsetElement, scrollOffset);
+      revertMeasuring();
 
       return {
         w: viewportScroll.w + contentScroll.w + fractional.w,

diff --git a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts
@@ -13,7 +13,7 @@ import {
   runEachAndClear,
   scrollT,
   bind,
-  getElmentScroll,
+  getElementScroll,
   inArray,
   strWidth,
   strHeight,
@@ -322,7 +322,7 @@ export const createScrollbarsSetupElements = (
         );
       });
     } else {
-      const scroll = getElmentScroll(_scrollOffsetElement);
+      const scroll = getElementScroll(_scrollOffsetElement);
       scrollbarStyle(scrollbarStructures, (structure) => {
         const { _handle, _scrollbar } = structure;
         return [
@@ -400,7 +400,7 @@ export const createScrollbarsSetupElements = (
           }
         });
       } else {
-        const scroll = getElmentScroll(_scrollOffsetElement);
+        const scroll = getElementScroll(_scrollOffsetElement);
         const styleScrollbarPosition = (structure: ScrollbarStructure) => {
           const { _scrollbar } = structure;
           const elm = doRefreshScrollbarOffset(_scrollbar) && _scrollbar;

diff --git a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts
@@ -1,6 +1,6 @@
 import {
   getBoundingClientRect,
-  offsetSize,
+  getOffsetSize,
   addEventListener,
   preventDefault,
   runEachAndClear,
@@ -12,7 +12,7 @@ import {
   mathRound,
   strWidth,
   strHeight,
-  getElmentScroll,
+  getElementScroll,
   scrollElementTo,
   getFocusedElement,
   setT,
@@ -91,7 +91,7 @@ export const createScrollbarsSetupEvents = (
       const createRelativeHandleMove =
         (mouseDownScroll: number, invertedScale: number) => (deltaMovement: number) => {
           const { _overflowAmount } = structureSetupState;
-          const handleTrackDiff = offsetSize(_track)[whKey] - offsetSize(_handle)[whKey];
+          const handleTrackDiff = getOffsetSize(_track)[whKey] - getOffsetSize(_handle)[whKey];
           const scrollDeltaPercent = (invertedScale * deltaMovement) / handleTrackDiff;
           const scrollDelta = scrollDeltaPercent * _overflowAmount[xyKey];
 
@@ -123,9 +123,9 @@ export const createScrollbarsSetupEvents = (
             (handleRect || getHandleRect())[leftTopKey] - (trackRect || getTrackRect())[leftTopKey];
           const axisScale =
             mathRound(getBoundingClientRect(_scrollOffsetElement)[widthHeightKey]) /
-              offsetSize(_scrollOffsetElement)[whKey] || 1;
+              getOffsetSize(_scrollOffsetElement)[whKey] || 1;
           const moveHandleRelative = createRelativeHandleMove(
-            getElmentScroll(_scrollOffsetElement)[xyKey] || 0,
+            getElementScroll(_scrollOffsetElement)[xyKey] || 0,
             1 / axisScale
           );
           const pointerDownOffset = pointerDownEvent[clientXYKey];

diff --git a/packages/overlayscrollbars/src/setups/setups.ts b/packages/overlayscrollbars/src/setups/setups.ts
@@ -1,13 +1,14 @@
 import {
   assignDeep,
   bind,
-  getElmentScroll,
+  getElementScroll,
   isEmptyObject,
   keys,
   runEachAndClear,
   scrollElementTo,
 } from '~/support';
 import { createOptionCheck } from '~/options';
+import { dataValueViewportMeasuring } from '~/classnames';
 import type { OptionsCheckFn, Options, PartialOptions, ReadonlyOptions } from '~/options';
 import type { DeepReadonly } from '~/typings';
 import type { InitializationTarget } from '~/initialization';
@@ -170,11 +171,14 @@ export const createSetups = (
 
   return [
     () => {
-      const { _originalScrollOffsetElement, _viewport } = structureSetupElements;
-      const initialScroll = getElmentScroll(_originalScrollOffsetElement);
+      const { _originalScrollOffsetElement, _scrollOffsetElement, _viewportAddRemoveClass } =
+        structureSetupElements;
+      const removeMeasuring = _viewportAddRemoveClass(dataValueViewportMeasuring, true);
+      const initialScroll = getElementScroll(_originalScrollOffsetElement);
       const destroyFns = [observersSetupCreate(), structureSetupCreate(), scrollbarsSetupCreate()];
 
-      scrollElementTo(_viewport, initialScroll);
+      scrollElementTo(_scrollOffsetElement, initialScroll);
+      removeMeasuring();
 
       return bind(runEachAndClear, destroyFns);
     },

diff --git a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts
@@ -1,10 +1,8 @@
 import { getEnvironment } from '~/environment';
 import {
-  addAttrClass,
   assignDeep,
   each,
-  getElmentScroll,
-  noop,
+  getElementScroll,
   scrollElementTo,
   strHidden,
   strMarginBottom,
@@ -17,7 +15,7 @@ import {
   type TRBL,
   type XY,
 } from '~/support';
-import { dataAttributeHost, dataValueViewportMeasuring } from '~/classnames';
+import { dataValueViewportMeasuring } from '~/classnames';
 import type { StructureSetupElementsObj } from './structureSetup.elements';
 import type {
   ObserversSetupState,
@@ -104,7 +102,7 @@ export const createStructureSetup = (target: InitializationTarget): StructureSet
       y: false,
     },
   };
-  const { _target, _viewport, _viewportIsTarget } = elements;
+  const { _target, _scrollOffsetElement, _viewportIsTarget, _viewportAddRemoveClass } = elements;
   const { _nativeScrollbarsHiding, _nativeScrollbarsOverlaid } = getEnvironment();
   const doViewportArrange =
     !_nativeScrollbarsHiding && (_nativeScrollbarsOverlaid.x || _nativeScrollbarsOverlaid.y);
@@ -120,20 +118,16 @@ export const createStructureSetup = (target: InitializationTarget): StructureSet
     (updateInfo) => {
       const updateHints: StructureSetupUpdateHints = {};
       const adjustScrollOffset = doViewportArrange;
-      const scrollOffset = adjustScrollOffset && getElmentScroll(_viewport);
-
-      const removeAttrClass = _viewportIsTarget
-        ? addAttrClass(_viewport, dataAttributeHost, dataValueViewportMeasuring)
-        : noop;
+      const scrollOffset = adjustScrollOffset && getElementScroll(_scrollOffsetElement);
+      const removeMeasuring = _viewportAddRemoveClass(dataValueViewportMeasuring, true);
 
       each(updateSegments, (updateSegment) => {
         assignDeep(updateHints, updateSegment(updateInfo, updateHints) || {});
       });
 
-      removeAttrClass();
-
-      scrollElementTo(_viewport, scrollOffset);
+      scrollElementTo(_scrollOffsetElement, scrollOffset);
       !_viewportIsTarget && scrollElementTo(_target, 0);
+      removeMeasuring();
 
       return updateHints;
     },