mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-06 08:12:26 +03:00
Code Issues Packages Projects Releases Wiki Activity

optimize for partially overlaid scrollbars

Browse Source
This commit is contained in:
Rene
2021-04-04 13:06:35 +02:00
parent a428e40b82
commit 248dfc7264
3 changed files with 49 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts
+1 -1
View File
@@ -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,
packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
+13 -6
View File
@@ -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
packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss
+35
View File
@@ -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;
}
*/