From 248dfc72641209a5afc6b2c7383876501ed5e0a7 Mon Sep 17 00:00:00 2001
From: Rene <king-sora@hotmail.de>
Date: Sun, 4 Apr 2021 13:06:35 +0200
Subject: [PATCH] optimize for partially overlaid scrollbars

---
 .../src/lifecycles/lifecycleHub.ts            |  2 +-
 .../src/lifecycles/overflowLifecycle.ts       | 19 ++++++----
 .../lifecycles/structureLifecycle/index.scss  | 35 +++++++++++++++++++
 3 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts b/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts
index bb761ef..5c46daa 100644
--- a/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts
+++ b/packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts
@@ -266,7 +266,7 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe
   const envUpdateListener = update.bind(null, null, true);
   addEnvironmentListener(envUpdateListener);
 
-  console.log('flexboxGlue', _flexboxGlue);
+  console.log(getEnvironment());
 
   return {
     _update: update,
diff --git a/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts b/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
index 621cfa6..cfce157 100644
--- a/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
+++ b/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
@@ -35,6 +35,7 @@ interface OverflowAmountCacheContext {
 
 interface ViewportOverflowState {
   _scrollbarsHideOffset: XY<number>;
+  _scrollbarsHideOffsetArrange: XY<boolean>;
   _overflowScroll: XY<boolean>;
 }
 
@@ -125,6 +126,10 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
 
     return {
       _overflowScroll: scroll,
+      _scrollbarsHideOffsetArrange: {
+        x: overlaidX,
+        y: overlaidY,
+      },
       _scrollbarsHideOffset: scrollbarsHideOffset,
     };
   };
@@ -181,15 +186,16 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
    */
   const arrangeViewport = (viewportOverflowState: ViewportOverflowState, contentScrollSize: WH<number>, directionIsRTL: boolean) => {
     if (_doViewportArrange) {
-      const { _scrollbarsHideOffset } = viewportOverflowState;
+      const { _scrollbarsHideOffset, _scrollbarsHideOffsetArrange } = viewportOverflowState;
+      const { x: arrangeX, y: arrangeY } = _scrollbarsHideOffsetArrange;
       const { x: hideOffsetX, y: hideOffsetY } = _scrollbarsHideOffset;
       const viewportPaddingStyle = _getViewportPaddingStyle();
       const viewportArrangeHorizontalPaddingKey: keyof StyleObject = directionIsRTL ? 'paddingRight' : 'paddingLeft';
       const viewportArrangeHorizontalPaddingValue = viewportPaddingStyle[viewportArrangeHorizontalPaddingKey] as number;
       const viewportArrangeVerticalPaddingValue = viewportPaddingStyle.paddingTop as number;
       const arrangeSize = {
-        w: hideOffsetY ? `${hideOffsetY + contentScrollSize.w - viewportArrangeHorizontalPaddingValue}px` : '',
-        h: hideOffsetX ? `${hideOffsetX + contentScrollSize.h - viewportArrangeVerticalPaddingValue}px` : '',
+        w: hideOffsetY && arrangeY ? `${hideOffsetY + contentScrollSize.w - viewportArrangeHorizontalPaddingValue}px` : '',
+        h: hideOffsetX && arrangeX ? `${hideOffsetX + contentScrollSize.h - viewportArrangeVerticalPaddingValue}px` : '',
       };
 
       // adjust content arrange / before element
@@ -234,7 +240,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
     viewportStyleObj: StyleObject
   ) => {
     const { _nativeScrollbarStyling } = getEnvironment();
-    const { _overflowScroll, _scrollbarsHideOffset } = viewportOverflowState;
+    const { _overflowScroll, _scrollbarsHideOffset, _scrollbarsHideOffsetArrange } = viewportOverflowState;
+    const { x: arrangeX, y: arrangeY } = _scrollbarsHideOffsetArrange;
     const { x: hideOffsetX, y: hideOffsetY } = _scrollbarsHideOffset;
     const { x: scrollX, y: scrollY } = _overflowScroll;
     const paddingStyle = _getViewportPaddingStyle();
@@ -254,8 +261,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
 
     // viewport arrange additional styles
     if (viewportArrange) {
-      viewportStyleObj[viewportHorizontalPaddingKey] = horizontalPaddingValue + hideOffsetY;
-      viewportStyleObj.paddingBottom = verticalPaddingValue + hideOffsetX;
+      viewportStyleObj[viewportHorizontalPaddingKey] = horizontalPaddingValue + (arrangeY ? hideOffsetY : 0);
+      viewportStyleObj.paddingBottom = verticalPaddingValue + (arrangeX ? hideOffsetX : 0);
     }
 
     // hide overflowing scrollbars if there are any
diff --git a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss
index 128161a..0a6dd53 100644
--- a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss
+++ b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss
@@ -148,3 +148,38 @@ body {
   background: red;
   opacity: 0.3;
 }
+
+/*
+.os-environment::-webkit-scrollbar,
+.os-viewport::-webkit-scrollbar,
+.os-environment::-webkit-scrollbar-corner,
+.os-viewport::-webkit-scrollbar-corner {
+  display: none !important;
+  width: 0px !important;
+  height: 0px !important;
+  visibility: hidden !important;
+  background: transparent !important;
+}
+
+div::-webkit-scrollbar:horizontal {
+  display: none !important;
+  width: 0px !important;
+  height: 0px !important;
+  visibility: hidden !important;
+  background: transparent !important;
+}
+div::-webkit-scrollbar:vertical {
+  display: block !important;
+  width: 10px !important;
+  height: 10px !important;
+  background: red;
+}
+
+::-webkit-scrollbar-track {
+  background: red;
+}
+
+::-webkit-scrollbar-thumb {
+  background: green;
+}
+*/