improve code

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<number>,
   viewportClientSize: WH<number>,
@@ -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),
+            w: arrangedViewportClientSize.w + max(0, viewportclientSize.w - viewportScrollSize.w),
-            h: arrangedViewportClientSize.h + max(0, viewportContentSize.h - viewportScrollSize.h),
+            h: arrangedViewportClientSize.h + max(0, viewportclientSize.h - viewportScrollSize.h),
           }, // client size
           sizeFraction
         ),

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;
 }

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;

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;