mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-23 00:40:37 +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); const envUpdateListener = update.bind(null, null, true);
addEnvironmentListener(envUpdateListener); addEnvironmentListener(envUpdateListener);
console.log('flexboxGlue', _flexboxGlue); console.log(getEnvironment());
return { return {
_update: update, _update: update,
packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
+13 -6
View File
@@ -35,6 +35,7 @@ interface OverflowAmountCacheContext {
interface ViewportOverflowState { interface ViewportOverflowState {
_scrollbarsHideOffset: XY<number>; _scrollbarsHideOffset: XY<number>;
_scrollbarsHideOffsetArrange: XY<boolean>;
_overflowScroll: XY<boolean>; _overflowScroll: XY<boolean>;
} }
@@ -125,6 +126,10 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
return { return {
_overflowScroll: scroll, _overflowScroll: scroll,
_scrollbarsHideOffsetArrange: {
x: overlaidX,
y: overlaidY,
},
_scrollbarsHideOffset: scrollbarsHideOffset, _scrollbarsHideOffset: scrollbarsHideOffset,
}; };
}; };
@@ -181,15 +186,16 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
*/ */
const arrangeViewport = (viewportOverflowState: ViewportOverflowState, contentScrollSize: WH<number>, directionIsRTL: boolean) => { const arrangeViewport = (viewportOverflowState: ViewportOverflowState, contentScrollSize: WH<number>, directionIsRTL: boolean) => {
if (_doViewportArrange) { if (_doViewportArrange) {
const { _scrollbarsHideOffset } = viewportOverflowState; const { _scrollbarsHideOffset, _scrollbarsHideOffsetArrange } = viewportOverflowState;
const { x: arrangeX, y: arrangeY } = _scrollbarsHideOffsetArrange;
const { x: hideOffsetX, y: hideOffsetY } = _scrollbarsHideOffset; const { x: hideOffsetX, y: hideOffsetY } = _scrollbarsHideOffset;
const viewportPaddingStyle = _getViewportPaddingStyle(); const viewportPaddingStyle = _getViewportPaddingStyle();
const viewportArrangeHorizontalPaddingKey: keyof StyleObject = directionIsRTL ? 'paddingRight' : 'paddingLeft'; const viewportArrangeHorizontalPaddingKey: keyof StyleObject = directionIsRTL ? 'paddingRight' : 'paddingLeft';
const viewportArrangeHorizontalPaddingValue = viewportPaddingStyle[viewportArrangeHorizontalPaddingKey] as number; const viewportArrangeHorizontalPaddingValue = viewportPaddingStyle[viewportArrangeHorizontalPaddingKey] as number;
const viewportArrangeVerticalPaddingValue = viewportPaddingStyle.paddingTop as number; const viewportArrangeVerticalPaddingValue = viewportPaddingStyle.paddingTop as number;
const arrangeSize = { const arrangeSize = {
w: hideOffsetY ? `${hideOffsetY + contentScrollSize.w - viewportArrangeHorizontalPaddingValue}px` : '', w: hideOffsetY && arrangeY ? `${hideOffsetY + contentScrollSize.w - viewportArrangeHorizontalPaddingValue}px` : '',
h: hideOffsetX ? `${hideOffsetX + contentScrollSize.h - viewportArrangeVerticalPaddingValue}px` : '', h: hideOffsetX && arrangeX ? `${hideOffsetX + contentScrollSize.h - viewportArrangeVerticalPaddingValue}px` : '',
}; };
// adjust content arrange / before element // adjust content arrange / before element
@@ -234,7 +240,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
viewportStyleObj: StyleObject viewportStyleObj: StyleObject
) => { ) => {
const { _nativeScrollbarStyling } = getEnvironment(); 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: hideOffsetX, y: hideOffsetY } = _scrollbarsHideOffset;
const { x: scrollX, y: scrollY } = _overflowScroll; const { x: scrollX, y: scrollY } = _overflowScroll;
const paddingStyle = _getViewportPaddingStyle(); const paddingStyle = _getViewportPaddingStyle();
@@ -254,8 +261,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
// viewport arrange additional styles // viewport arrange additional styles
if (viewportArrange) { if (viewportArrange) {
viewportStyleObj[viewportHorizontalPaddingKey] = horizontalPaddingValue + hideOffsetY; viewportStyleObj[viewportHorizontalPaddingKey] = horizontalPaddingValue + (arrangeY ? hideOffsetY : 0);
viewportStyleObj.paddingBottom = verticalPaddingValue + hideOffsetX; viewportStyleObj.paddingBottom = verticalPaddingValue + (arrangeX ? hideOffsetX : 0);
} }
// hide overflowing scrollbars if there are any // 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; background: red;
opacity: 0.3; 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;
}
*/