fix arrange bug

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

@@ -1,21 +1,9 @@
-import {
+import { rAF, cAF, isFunction, on, runEachAndClear, setT, clearT } from 'support';
-  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,
@@ -175,7 +163,7 @@ export const createScrollbarsSetup = (
     target,
     structureSetupState._elements
   );
-  const { _host, _viewport, _viewportIsTarget, _isBody } = structureSetupState._elements;
+  const { _host, _viewport } = structureSetupState._elements;
   const { _horizontal, _vertical } = elements;
   const { _addRemoveClass: addRemoveClassHorizontal, _handleStyle: styleHorizontal } = _horizontal;
   const { _addRemoveClass: addRemoveClassVertical, _handleStyle: styleVertical } = _vertical;

packages/overlayscrollbars/src/setups/structureSetup/structureSetup.observers.ts

@@ -20,6 +20,8 @@ import {
   closest,
   assignDeep,
   push,
+  scrollLeft,
+  scrollTop,
 } from 'support';
 import { getEnvironment } from 'environment';
 import {
@@ -28,6 +30,7 @@ import {
   classNameViewport,
   classNameOverflowVisible,
   classNameScrollbar,
+  classNameViewportArrange,
 } from 'classnames';
 import { createSizeObserver, SizeObserverCallbackParams } from 'observers/sizeObserver';
 import { createTrinsicObserver } from 'observers/trinsicObserver';
@@ -91,14 +94,21 @@ export const createStructureSetupObservers = (
       _initialValue: { w: 0, h: 0 },
     },
     () => {
-      const has = _viewportHasClass(classNameOverflowVisible, dataValueHostOverflowVisible);
+      const hasOver = _viewportHasClass(classNameOverflowVisible, dataValueHostOverflowVisible);
-      has && _viewportAddRemoveClass(classNameOverflowVisible, dataValueHostOverflowVisible);
+      const hasVpStyle = _viewportHasClass(classNameViewportArrange, '');
+      const scrollOffsetX = hasVpStyle && scrollLeft(_viewport);
+      const scrollOffsetY = hasVpStyle && scrollTop(_viewport);
+      _viewportAddRemoveClass(classNameOverflowVisible, dataValueHostOverflowVisible);
+      _viewportAddRemoveClass(classNameViewportArrange, '');
 
       const contentScroll = scrollSize(_content);
       const viewportScroll = scrollSize(_viewport);
       const fractional = fractionalSize(_viewport);
 
-      has && _viewportAddRemoveClass(classNameOverflowVisible, dataValueHostOverflowVisible, true);
+      _viewportAddRemoveClass(classNameOverflowVisible, dataValueHostOverflowVisible, hasOver);
+      _viewportAddRemoveClass(classNameViewportArrange, '', hasVpStyle);
+      scrollLeft(_viewport, scrollOffsetX);
+      scrollTop(_viewport, scrollOffsetY);
       return {
         w: viewportScroll.w + contentScroll.w + fractional.w,
         h: viewportScroll.h + contentScroll.h + fractional.h,

packages/overlayscrollbars/src/setups/structureSetup/structureSetup.update.ts

@@ -1,4 +1,4 @@
-import { each, isNumber, scrollLeft, scrollTop, assignDeep, keys } from 'support';
+import { each, scrollLeft, scrollTop, assignDeep, keys } from 'support';
 import { getEnvironment } from 'environment';
 import {
   createTrinsicUpdateSegment,
@@ -107,12 +107,8 @@ export const createStructureSetupUpdate = (
       );
     });
 
-    if (isNumber(scrollOffsetX)) {
+    scrollLeft(_viewport, scrollOffsetX);
-      scrollLeft(_viewport, scrollOffsetX);
+    scrollTop(_viewport, scrollOffsetY);
-    }
-    if (isNumber(scrollOffsetY)) {
-      scrollTop(_viewport, scrollOffsetY);
-    }
 
     return adaptivedUpdateHints;
   };

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

@@ -1,5 +1,5 @@
 import { from } from 'support/utils/array';
-import { isUndefined } from 'support/utils/types';
+import { isNull, isUndefined } from 'support/utils/types';
 
 type GetSetPropName = 'scrollLeft' | 'scrollTop' | 'value';
 
@@ -14,20 +14,20 @@ type Attr = {
 
 type GetSetProp<T> = {
   (elm: HTMLElement | false | null | undefined): T;
-  (elm: HTMLElement | false | null | undefined, value: T): void;
+  (elm: HTMLElement | false | null | undefined, value: T | false | null): void;
-  (elm: HTMLElement | false | null | undefined, value?: T): number | void;
+  (elm: HTMLElement | false | null | undefined, value?: T | false | null): T | void;
 };
 
 const getSetProp = (
   topLeft: GetSetPropName,
   fallback: number | string,
   elm: HTMLElement | HTMLInputElement | false | null | undefined,
-  value?: number | string
+  value?: number | string | false | null
 ): number | string | void => {
   if (isUndefined(value)) {
     return elm ? elm[topLeft] : fallback;
   }
-  elm && (elm[topLeft] = value);
+  elm && !isNull(value) && value !== false && (elm[topLeft] = value);
 };
 
 /**
@@ -103,7 +103,7 @@ export const removeAttr = (elm: Element | false | null | undefined, attrName: st
  */
 export const scrollLeft = ((
   elm: HTMLElement | false | null | undefined,
-  value?: number
+  value?: number | false | null
 ): number | void => getSetProp('scrollLeft', 0, elm, value) as number) as GetSetProp<number>;
 
 /**
@@ -113,7 +113,7 @@ export const scrollLeft = ((
  */
 export const scrollTop = ((
   elm: HTMLElement | false | null | undefined,
-  value?: number
+  value?: number | false | null
 ): number | void => getSetProp('scrollTop', 0, elm, value) as number) as GetSetProp<number>;
 
 /**