diff --git a/packages/overlayscrollbars/src/setups/observersSetup/observersSetup.ts b/packages/overlayscrollbars/src/setups/observersSetup/observersSetup.ts index 805e9332..78b36e3d 100644 --- a/packages/overlayscrollbars/src/setups/observersSetup/observersSetup.ts +++ b/packages/overlayscrollbars/src/setups/observersSetup/observersSetup.ts @@ -91,6 +91,7 @@ export const createObserversSetup = ( _content, _isTextarea, _viewportIsTarget, + _isBody, _viewportHasClass, _viewportAddRemoveClass, } = structureSetupElements; @@ -122,14 +123,14 @@ export const createObserversSetup = ( getCurrentOption )._undoViewportArrange; - const noClipping = hasAttrClass(_host, dataAttributeHost, dataValueNoClipping); + const viewportIsTargetBody = _isBody && _viewportIsTarget; + const noClipping = + !viewportIsTargetBody && hasAttrClass(_host, dataAttributeHost, dataValueNoClipping); const isArranged = !_viewportIsTarget && _viewportHasClass(dataValueViewportArrange); const scrollOffset = isArranged && getElementScroll(_scrollOffsetElement); const revertMeasuring = _viewportAddRemoveClass(dataValueViewportMeasuring, noClipping); const redoViewportArrange = isArranged && _undoViewportArrange && _undoViewportArrange()[0]; - - const contentScroll = getScrollSize(_content); const viewportScroll = getScrollSize(_viewport); const fractional = getFractionalSize(_viewport); @@ -139,8 +140,8 @@ export const createObserversSetup = ( noClipping && revertMeasuring(); return { - w: viewportScroll.w + contentScroll.w + fractional.w, - h: viewportScroll.h + contentScroll.h + fractional.h, + w: viewportScroll.w + fractional.w, + h: viewportScroll.h + fractional.h, }; } ); diff --git a/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts b/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts index 3985b861..44aa1ab5 100644 --- a/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts +++ b/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts @@ -15,7 +15,6 @@ import { setStyles, strVisible, strHidden, - each, keys, strScroll, scrollElementTo, @@ -45,7 +44,6 @@ import type { ScrollCoordinates, WH, XY } from '~/support'; import type { ScrollbarsHidingPlugin } from '~/plugins/scrollbarsHidingPlugin'; import type { OverflowStyle } from '~/typings'; import type { CreateStructureUpdateSegment } from '../structureSetup'; -import type { ViewportOverflowState } from '../structureSetup.utils'; import { createViewportOverflowState, getShowNativeOverlaidScrollbars, @@ -94,7 +92,8 @@ export const createOverflowUpdateSegment: CreateStructureUpdateSegment = ( _initialValue: {}, }; const setMeasuringMode = (active: boolean) => { - _viewportAddRemoveClass(dataValueViewportMeasuring, active); + // viewportIsTargetBody never needs measuring + _viewportAddRemoveClass(dataValueViewportMeasuring, !viewportIsTargetBody && active); }; const getOverflowAmount = ( @@ -205,21 +204,25 @@ export const createOverflowUpdateSegment: CreateStructureUpdateSegment = ( : dataValueViewportOverflowYPrefix; return `${prefix}${capitalizeFirstLetter(overflowStyle)}`; }; - - const setViewportOverflow = (viewportOverflowState: ViewportOverflowState) => { - const { _overflowStyle } = viewportOverflowState; - - each(keys(_overflowStyle) as Array, (axis) => { - const isHorizontal = axis === 'x'; - const allOverflowStyleClassNames = ( - [strVisible, strHidden, strScroll] as OverflowStyle[] - ).map((style) => createViewportOverflowStyleClassName(style, isHorizontal)); - _viewportAddRemoveClass(allOverflowStyleClassNames.join(' ')); - _viewportAddRemoveClass( - createViewportOverflowStyleClassName(_overflowStyle[axis], isHorizontal), - true + const setViewportOverflowStyle = (viewportOverflowStyle: XY) => { + // `createAllOverflowStyleClassNames` and `allOverflowStyleClassNames` could be one scope further up but would increase bundle size + const createAllOverflowStyleClassNames = (isHorizontal?: boolean) => + ([strVisible, strHidden, strScroll] as OverflowStyle[]).map((style) => + createViewportOverflowStyleClassName(style, isHorizontal) ); - }); + const allOverflowStyleClassNames = createAllOverflowStyleClassNames(true) + .concat(createAllOverflowStyleClassNames()) + .join(' '); + + _viewportAddRemoveClass(allOverflowStyleClassNames); + _viewportAddRemoveClass( + (keys(viewportOverflowStyle) as Array) + .map((axis) => + createViewportOverflowStyleClassName(viewportOverflowStyle[axis], axis === 'x') + ) + .join(' '), + true + ); }; return ( @@ -273,32 +276,29 @@ export const createOverflowUpdateSegment: CreateStructureUpdateSegment = ( const [viewportScrollSize] = (viewportScrollSizeCache = updateViewportScrollSizeCache(_force)); const viewportClientSize = getClientSize(_viewport); - const arrangedViewportScrollSize = viewportScrollSize; - const arrangedViewportClientSize = viewportClientSize; - - redoViewportArrange && redoViewportArrange(); - - const windowInnerSize = getWindowSize(_windowElm()); + const windowInnerSize = viewportIsTargetBody && getWindowSize(_windowElm()); const overflowAmountScrollSize = { - w: max0(mathMax(viewportScrollSize.w, arrangedViewportScrollSize.w) + sizeFraction.w), - h: max0(mathMax(viewportScrollSize.h, arrangedViewportScrollSize.h) + sizeFraction.h), + w: max0(viewportScrollSize.w + sizeFraction.w), + h: max0(viewportScrollSize.h + sizeFraction.h), }; const overflowAmountClientSize = { w: max0( - (viewportIsTargetBody + (windowInnerSize ? windowInnerSize.w - : arrangedViewportClientSize.w + max0(viewportClientSize.w - viewportScrollSize.w)) + + : viewportClientSize.w + max0(viewportClientSize.w - viewportScrollSize.w)) + sizeFraction.w ), h: max0( - (viewportIsTargetBody + (windowInnerSize ? windowInnerSize.h - : arrangedViewportClientSize.h + max0(viewportClientSize.h - viewportScrollSize.h)) + + : viewportClientSize.h + max0(viewportClientSize.h - viewportScrollSize.h)) + sizeFraction.h ), }; + redoViewportArrange && redoViewportArrange(); + overflowEdgeCache = updateOverflowEdge(overflowAmountClientSize); overflowAmuntCache = updateOverflowAmountCache( getOverflowAmount(overflowAmountScrollSize, overflowAmountClientSize), @@ -345,7 +345,7 @@ export const createOverflowUpdateSegment: CreateStructureUpdateSegment = ( : getCurrentMeasuredScrollCoordinates(); if (adjustViewportStyle) { - setViewportOverflow(viewportOverflowState); + overflowStyleChanged && setViewportOverflowStyle(viewportOverflowState._overflowStyle); if (_hideNativeScrollbars && _arrangeViewport) { setStyles(