From d656d73dc7f5df2f337aec0976edf50ecccdb238 Mon Sep 17 00:00:00 2001 From: Rene Date: Sun, 3 Jul 2022 14:30:49 +0200 Subject: [PATCH] improve code --- .../updateSegments/overflowUpdateSegment.ts | 9 +++++---- .../overlayscrollbars/src/styles/overlayscrollbars.scss | 9 +++++++-- packages/overlayscrollbars/src/support/dom/dimensions.ts | 8 ++++---- .../lifecycles/structureLifecycle/index.browser.ts | 2 +- 4 files changed, 17 insertions(+), 11 deletions(-) diff --git a/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts b/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts index 5b58c41..9dd674b 100644 --- a/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts +++ b/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts @@ -48,6 +48,7 @@ const xyCacheOptions = { _equal: equalXY, _initialValue: { x: false, y: false }, }; + const getOverflowAmount = ( viewportScrollSize: WH, viewportClientSize: WH, @@ -444,9 +445,9 @@ export const createOverflowUpdate: CreateStructureUpdateSegment = ( const [sizeFraction, sizeFractionChanged] = (sizeFractionCache = updateSizeFraction(force)); const [viewportScrollSize, viewportScrollSizeChanged] = (viewportScrollSizeCache = updateViewportScrollSizeCache(force)); - const viewportContentSize = clientSize(_viewport); + const viewportclientSize = clientSize(_viewport); let arrangedViewportScrollSize = viewportScrollSize; - let arrangedViewportClientSize = viewportContentSize; + let arrangedViewportClientSize = viewportclientSize; redoViewportArrange(); @@ -473,8 +474,8 @@ export const createOverflowUpdate: CreateStructureUpdateSegment = ( h: max(viewportScrollSize.h, arrangedViewportScrollSize.h), }, // scroll size { - w: arrangedViewportClientSize.w + max(0, viewportContentSize.w - viewportScrollSize.w), - h: arrangedViewportClientSize.h + max(0, viewportContentSize.h - viewportScrollSize.h), + w: arrangedViewportClientSize.w + max(0, viewportclientSize.w - viewportScrollSize.w), + h: arrangedViewportClientSize.h + max(0, viewportclientSize.h - viewportScrollSize.h), }, // client size sizeFraction ), diff --git a/packages/overlayscrollbars/src/styles/overlayscrollbars.scss b/packages/overlayscrollbars/src/styles/overlayscrollbars.scss index 33fcdfc..bd24e92 100644 --- a/packages/overlayscrollbars/src/styles/overlayscrollbars.scss +++ b/packages/overlayscrollbars/src/styles/overlayscrollbars.scss @@ -109,13 +109,18 @@ } } -[data-overlayscrollbars], +[data-overlayscrollbars] { + overflow: hidden !important; +} +[data-overlayscrollbars~='overflowVisible'] { + overflow: visible !important; +} + .os-padding, .os-viewport { overflow: hidden; } -[data-overlayscrollbars~='overflowVisible'], .os-overflow-visible { overflow: visible; } diff --git a/packages/overlayscrollbars/src/support/dom/dimensions.ts b/packages/overlayscrollbars/src/support/dom/dimensions.ts index 1143886..3c073b7 100644 --- a/packages/overlayscrollbars/src/support/dom/dimensions.ts +++ b/packages/overlayscrollbars/src/support/dom/dimensions.ts @@ -36,7 +36,7 @@ export const offsetSize = (elm: HTMLElement | null | undefined): WH => * Returns the client- width and height of the passed element. If the element is null the width and height values are 0. * @param elm The element of which the client- width and height shall be returned. */ -export const clientSize = (elm: HTMLElement | null | undefined): WH => +export const clientSize = (elm: HTMLElement | false | null | undefined): WH => elm ? { w: elm.clientWidth, @@ -48,7 +48,7 @@ export const clientSize = (elm: HTMLElement | null | undefined): WH => * Returns the client- width and height of the passed element. If the element is null the width and height values are 0. * @param elm The element of which the client- width and height shall be returned. */ -export const scrollSize = (elm: HTMLElement | null | undefined): WH => +export const scrollSize = (elm: HTMLElement | false | null | undefined): WH => elm ? { w: elm.scrollWidth, @@ -60,7 +60,7 @@ export const scrollSize = (elm: HTMLElement | null | undefined): WH => * Returns the fractional- width and height of the passed element. If the element is null the width and height values are 0. * @param elm The element of which the fractional- width and height shall be returned. */ -export const fractionalSize = (elm: HTMLElement | null | undefined): WH => { +export const fractionalSize = (elm: HTMLElement | false | null | undefined): WH => { const cssHeight = parseFloat(style(elm, 'height')) || 0; const cssWidth = parseFloat(style(elm, 'height')) || 0; return { @@ -79,5 +79,5 @@ export const getBoundingClientRect = (elm: HTMLElement): DOMRect => elm.getBound * Determines whether the passed element has any dimensions. * @param elm The element. */ -export const hasDimensions = (elm: HTMLElement | null | undefined): boolean => +export const hasDimensions = (elm: HTMLElement | false | null | undefined): boolean => elm ? elementHasDimensions(elm as HTMLElement) : false; diff --git a/packages/overlayscrollbars/tests/playwright/lifecycles/structureLifecycle/index.browser.ts b/packages/overlayscrollbars/tests/playwright/lifecycles/structureLifecycle/index.browser.ts index 8d33a83..77628be 100644 --- a/packages/overlayscrollbars/tests/playwright/lifecycles/structureLifecycle/index.browser.ts +++ b/packages/overlayscrollbars/tests/playwright/lifecycles/structureLifecycle/index.browser.ts @@ -134,7 +134,7 @@ const msedge = window.navigator.userAgent.toLowerCase().indexOf('edge') > -1; msie11 && addClass(document.body, 'msie11'); -const useContentElement = false; +const useContentElement = true; const fixedDigits = msie11 ? 1 : 3; const fixedDigitsOffset = 3;