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

improve overflow amount

Browse Source
This commit is contained in:
Rene Haas
2021-05-14 10:26:55 +02:00
parent 99d1c25dae
commit 4b81339ca0
2 changed files with 18 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
+2 -2
View File
@@ -96,8 +96,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
); );
const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache<WH<number>, OverflowAmountCacheContext>( const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache<WH<number>, OverflowAmountCacheContext>(
({ _viewportScrollSize, _viewportClientSize, _viewportSizeFraction }) => ({ ({ _viewportScrollSize, _viewportClientSize, _viewportSizeFraction }) => ({
w: round(max(0, _viewportScrollSize.w - _viewportClientSize.w) - max(0, _viewportSizeFraction.w)), w: max(0, round(max(0, _viewportScrollSize.w - _viewportClientSize.w) - max(0, _viewportSizeFraction.w))),
h: round(max(0, _viewportScrollSize.h - _viewportClientSize.h) - max(0, _viewportSizeFraction.h)), h: max(0, round(max(0, _viewportScrollSize.h - _viewportClientSize.h) - max(0, _viewportSizeFraction.h))),
}), }),
whCacheOptions whCacheOptions
); );
packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts
+16 -15
View File
@@ -41,7 +41,10 @@ interface CheckComparisonObj {
metrics: Metrics; metrics: Metrics;
} }
const isFractionalPixelRatio = () => window.devicePixelRatio % 1 !== 0;
const getMetrics = (elm: HTMLElement): Metrics => { const getMetrics = (elm: HTMLElement): Metrics => {
const rounding = isFractionalPixelRatio() ? Math.round : (num: number) => num;
const comparisonEnvBCR = getBoundingClientRect(parent(elm!) as HTMLElement); const comparisonEnvBCR = getBoundingClientRect(parent(elm!) as HTMLElement);
const comparisonBCR = getBoundingClientRect(elm!); const comparisonBCR = getBoundingClientRect(elm!);
const comparisonPercentBCR = getBoundingClientRect(elm!.querySelector('.percent')!); const comparisonPercentBCR = getBoundingClientRect(elm!.querySelector('.percent')!);
@@ -50,8 +53,8 @@ const getMetrics = (elm: HTMLElement): Metrics => {
const scrollMeasure = (elm: HTMLElement) => { const scrollMeasure = (elm: HTMLElement) => {
return { return {
width: elm!.scrollWidth - elm!.clientWidth, width: Math.max(0, elm!.scrollWidth - elm!.clientWidth),
height: elm!.scrollHeight - elm!.clientHeight, height: Math.max(0, elm!.scrollHeight - elm!.clientHeight),
}; };
}; };
@@ -65,22 +68,22 @@ const getMetrics = (elm: HTMLElement): Metrics => {
return { return {
offset: { offset: {
left: (comparisonBCR.left - comparisonEnvBCR.left).toFixed(Math.min(fixedDigitsOffset, fixedDigits)), left: rounding(comparisonBCR.left - comparisonEnvBCR.left).toFixed(Math.min(fixedDigitsOffset, fixedDigits)),
top: (comparisonBCR.top - comparisonEnvBCR.top).toFixed(Math.min(fixedDigitsOffset, fixedDigits)), top: rounding(comparisonBCR.top - comparisonEnvBCR.top).toFixed(Math.min(fixedDigitsOffset, fixedDigits)),
}, },
size: { size: {
width: comparisonBCR.width.toFixed(fixedDigits), width: rounding(comparisonBCR.width).toFixed(fixedDigits),
height: comparisonBCR.height.toFixed(fixedDigits), height: rounding(comparisonBCR.height).toFixed(fixedDigits),
}, },
scroll: elm === target ? scrollMeasure(targetViewport!) : scrollMeasure(comparison!), scroll: elm === target ? scrollMeasure(targetViewport!) : scrollMeasure(comparison!),
hasOverflow: elm === target ? hasOverflow(targetViewport!) : hasOverflow(comparison!), hasOverflow: elm === target ? hasOverflow(targetViewport!) : hasOverflow(comparison!),
percentElm: { percentElm: {
width: comparisonPercentBCR.width.toFixed(fixedDigits), width: rounding(comparisonPercentBCR.width).toFixed(fixedDigits),
height: comparisonPercentBCR.height.toFixed(fixedDigits), height: rounding(comparisonPercentBCR.height).toFixed(fixedDigits),
}, },
endElm: { endElm: {
width: comparisonEndBCR.width.toFixed(fixedDigits), width: rounding(comparisonEndBCR.width).toFixed(fixedDigits),
height: comparisonEndBCR.height.toFixed(fixedDigits), height: rounding(comparisonEndBCR.height).toFixed(fixedDigits),
}, },
}; };
}; };
@@ -92,8 +95,6 @@ const metricsDimensionsEqual = (a: Metrics, b: Metrics) => {
return JSON.stringify(aDimensions) === JSON.stringify(bDimensions); return JSON.stringify(aDimensions) === JSON.stringify(bDimensions);
}; };
const isFractionalPixelRatio = () => window.devicePixelRatio % 1 !== 0;
const plusMinusArr = (original: number, plusMinus: number) => { const plusMinusArr = (original: number, plusMinus: number) => {
return [original, original + plusMinus, original - plusMinus]; return [original, original + plusMinus, original - plusMinus];
}; };
@@ -362,9 +363,9 @@ const overflowTest = async () => {
}; };
const { paddingRight, paddingBottom } = style(comparison, ['paddingRight', 'paddingBottom']); const { paddingRight, paddingBottom } = style(comparison, ['paddingRight', 'paddingBottom']);
const comparisonContentBox = contentBox(comparison); const comparisonContentBox = contentBox(comparison);
const widthOverflow = width ? addOverflow : 0; const widthOverflow = width ? comparisonContentBox.w + addOverflow : 0;
const heightOverflow = height ? addOverflow : 0; const heightOverflow = height ? comparisonContentBox.h + addOverflow : 0;
const styleObj = { width: comparisonContentBox.w + widthOverflow, height: comparisonContentBox.h + heightOverflow }; const styleObj = { width: widthOverflow, height: heightOverflow };
style(comparisonResize, styleObj); style(comparisonResize, styleObj);