From c3b4e372ffa6d3b38a3024d587b948dcfe1c9a6c Mon Sep 17 00:00:00 2001 From: Rene Date: Mon, 18 Jul 2022 21:43:28 +0200 Subject: [PATCH] fix arrange bug --- .../setups/scrollbarsSetup/scrollbarsSetup.ts | 16 ++-------------- .../structureSetup/structureSetup.observers.ts | 16 +++++++++++++--- .../structureSetup/structureSetup.update.ts | 10 +++------- .../src/support/dom/attribute.ts | 14 +++++++------- 4 files changed, 25 insertions(+), 31 deletions(-) diff --git a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts index 3773272..78a2868 100644 --- a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts +++ b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts @@ -1,21 +1,9 @@ -import { - rAF, - cAF, - isFunction, - on, - runEachAndClear, - setT, - clearT, - parent, - scrollLeft, - scrollTop, -} from 'support'; +import { rAF, cAF, isFunction, on, runEachAndClear, setT, clearT } 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; diff --git a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.observers.ts b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.observers.ts index 4b380cf..2a30645 100644 --- a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.observers.ts +++ b/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); - has && _viewportAddRemoveClass(classNameOverflowVisible, dataValueHostOverflowVisible); + const hasOver = _viewportHasClass(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, diff --git a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.update.ts b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.update.ts index 0438f7a..2f80e86 100644 --- a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.update.ts +++ b/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); - } - if (isNumber(scrollOffsetY)) { - scrollTop(_viewport, scrollOffsetY); - } + scrollLeft(_viewport, scrollOffsetX); + scrollTop(_viewport, scrollOffsetY); return adaptivedUpdateHints; }; diff --git a/packages/overlayscrollbars/src/support/dom/attribute.ts b/packages/overlayscrollbars/src/support/dom/attribute.ts index b361e59..0b25ebd 100644 --- a/packages/overlayscrollbars/src/support/dom/attribute.ts +++ b/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 = { (elm: HTMLElement | false | null | undefined): T; - (elm: HTMLElement | false | null | undefined, value: T): void; - (elm: HTMLElement | false | null | undefined, value?: T): number | void; + (elm: HTMLElement | false | null | undefined, value: T | false | null): 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; /** @@ -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; /**