mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-02 03:44:06 +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>(
({ _viewportScrollSize, _viewportClientSize, _viewportSizeFraction }) => ({
w: round(max(0, _viewportScrollSize.w - _viewportClientSize.w) - max(0, _viewportSizeFraction.w)),
h: round(max(0, _viewportScrollSize.h - _viewportClientSize.h) - max(0, _viewportSizeFraction.h)),
w: max(0, round(max(0, _viewportScrollSize.w - _viewportClientSize.w) - max(0, _viewportSizeFraction.w))),
h: max(0, round(max(0, _viewportScrollSize.h - _viewportClientSize.h) - max(0, _viewportSizeFraction.h))),
}),
whCacheOptions
);
packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts
+16 -15
View File
@@ -41,7 +41,10 @@ interface CheckComparisonObj {
metrics: Metrics;
}
const isFractionalPixelRatio = () => window.devicePixelRatio % 1 !== 0;
const getMetrics = (elm: HTMLElement): Metrics => {
const rounding = isFractionalPixelRatio() ? Math.round : (num: number) => num;
const comparisonEnvBCR = getBoundingClientRect(parent(elm!) as HTMLElement);
const comparisonBCR = getBoundingClientRect(elm!);
const comparisonPercentBCR = getBoundingClientRect(elm!.querySelector('.percent')!);
@@ -50,8 +53,8 @@ const getMetrics = (elm: HTMLElement): Metrics => {
const scrollMeasure = (elm: HTMLElement) => {
return {
width: elm!.scrollWidth - elm!.clientWidth,
height: elm!.scrollHeight - elm!.clientHeight,
width: Math.max(0, elm!.scrollWidth - elm!.clientWidth),
height: Math.max(0, elm!.scrollHeight - elm!.clientHeight),
};
};
@@ -65,22 +68,22 @@ const getMetrics = (elm: HTMLElement): Metrics => {
return {
offset: {
left: (comparisonBCR.left - comparisonEnvBCR.left).toFixed(Math.min(fixedDigitsOffset, fixedDigits)),
top: (comparisonBCR.top - comparisonEnvBCR.top).toFixed(Math.min(fixedDigitsOffset, fixedDigits)),
left: rounding(comparisonBCR.left - comparisonEnvBCR.left).toFixed(Math.min(fixedDigitsOffset, fixedDigits)),
top: rounding(comparisonBCR.top - comparisonEnvBCR.top).toFixed(Math.min(fixedDigitsOffset, fixedDigits)),
},
size: {
width: comparisonBCR.width.toFixed(fixedDigits),
height: comparisonBCR.height.toFixed(fixedDigits),
width: rounding(comparisonBCR.width).toFixed(fixedDigits),
height: rounding(comparisonBCR.height).toFixed(fixedDigits),
},
scroll: elm === target ? scrollMeasure(targetViewport!) : scrollMeasure(comparison!),
hasOverflow: elm === target ? hasOverflow(targetViewport!) : hasOverflow(comparison!),
percentElm: {
width: comparisonPercentBCR.width.toFixed(fixedDigits),
height: comparisonPercentBCR.height.toFixed(fixedDigits),
width: rounding(comparisonPercentBCR.width).toFixed(fixedDigits),
height: rounding(comparisonPercentBCR.height).toFixed(fixedDigits),
},
endElm: {
width: comparisonEndBCR.width.toFixed(fixedDigits),
height: comparisonEndBCR.height.toFixed(fixedDigits),
width: rounding(comparisonEndBCR.width).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);
};
const isFractionalPixelRatio = () => window.devicePixelRatio % 1 !== 0;
const plusMinusArr = (original: number, plusMinus: number) => {
return [original, original + plusMinus, original - plusMinus];
};
@@ -362,9 +363,9 @@ const overflowTest = async () => {
};
const { paddingRight, paddingBottom } = style(comparison, ['paddingRight', 'paddingBottom']);
const comparisonContentBox = contentBox(comparison);
const widthOverflow = width ? addOverflow : 0;
const heightOverflow = height ? addOverflow : 0;
const styleObj = { width: comparisonContentBox.w + widthOverflow, height: comparisonContentBox.h + heightOverflow };
const widthOverflow = width ? comparisonContentBox.w + addOverflow : 0;
const heightOverflow = height ? comparisonContentBox.h + addOverflow : 0;
const styleObj = { width: widthOverflow, height: heightOverflow };
style(comparisonResize, styleObj);