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

improve code

Browse Source
This commit is contained in:
Rene Haas
2022-07-28 15:56:38 +02:00
parent 24340971a9
commit 2c711ed7ef
3 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts
+7 -6
View File
@@ -26,9 +26,9 @@ export type ScrollbarsSetupEvents = (
) => () => void; ) => () => void;
const { round } = Math; const { round } = Math;
const getPageOffset = (event: PointerEvent): XY<number> => ({ const getClientOffset = (event: PointerEvent): XY<number> => ({
x: event.pageX, x: event.clientX,
y: event.pageY, y: event.clientY,
}); });
const getScale = (element: HTMLElement): XY<number> => { const getScale = (element: HTMLElement): XY<number> => {
const { width, height } = getBoundingClientRect(element); const { width, height } = getBoundingClientRect(element);
@@ -74,10 +74,11 @@ const createDragScrollingEvents = (
const xyKey = `${isHorizontal ? 'x' : 'y'}`; const xyKey = `${isHorizontal ? 'x' : 'y'}`;
const whKey = `${isHorizontal ? 'w' : 'h'}`; const whKey = `${isHorizontal ? 'w' : 'h'}`;
const createOnPointerMoveHandler = const createOnPointerMoveHandler =
(mouseDownScroll: number, mouseDownPageOffset: number, mouseDownInvertedScale: number) => (mouseDownScroll: number, mouseDownClientOffset: number, mouseDownInvertedScale: number) =>
(event: PointerEvent) => { (event: PointerEvent) => {
const { _overflowAmount } = structureSetupState(); const { _overflowAmount } = structureSetupState();
const movement = (getPageOffset(event)[xyKey] - mouseDownPageOffset) * mouseDownInvertedScale; const movement =
(getClientOffset(event)[xyKey] - mouseDownClientOffset) * mouseDownInvertedScale;
const handleTrackDiff = offsetSize(_track)[whKey] - offsetSize(_handle)[whKey]; const handleTrackDiff = offsetSize(_track)[whKey] - offsetSize(_handle)[whKey];
const scrollDeltaPercent = movement / handleTrackDiff; const scrollDeltaPercent = movement / handleTrackDiff;
const scrollDelta = scrollDeltaPercent * _overflowAmount[xyKey]; const scrollDelta = scrollDeltaPercent * _overflowAmount[xyKey];
@@ -98,7 +99,7 @@ const createDragScrollingEvents = (
'pointermove', 'pointermove',
createOnPointerMoveHandler( createOnPointerMoveHandler(
scrollOffsetElement[scrollOffsetKey] || 0, scrollOffsetElement[scrollOffsetKey] || 0,
getPageOffset(pointerDownEvent)[xyKey], getClientOffset(pointerDownEvent)[xyKey],
1 / getScale(scrollOffsetElement)[xyKey] 1 / getScale(scrollOffsetElement)[xyKey]
) )
); );
packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts
+5 -5
View File
@@ -137,13 +137,13 @@ export const createScrollbarsSetup = (
cancelMouseMoveAnimationFrame, cancelMouseMoveAnimationFrame,
destroyElements, destroyElements,
on(_host, 'mouseover', onHostMouseEnter, { _once: true }), on(_host, 'pointerover', onHostMouseEnter, { _once: true }),
on(_host, 'mouseenter', onHostMouseEnter), on(_host, 'pointerenter', onHostMouseEnter),
on(_host, 'mouseleave', () => { on(_host, 'pointerleave', () => {
mouseInHost = false; mouseInHost = false;
autoHideIsLeave && manageScrollbarsAutoHide(false); autoHideIsLeave && manageScrollbarsAutoHide(false);
}), }),
on(_host, 'mousemove', () => { on(_host, 'pointermove', () => {
autoHideIsMove && autoHideIsMove &&
requestMouseMoveAnimationFrame(() => { requestMouseMoveAnimationFrame(() => {
clearScrollTimeout(); clearScrollTimeout();
@@ -235,7 +235,7 @@ export const createScrollbarsSetup = (
scrollbarsAddRemoveClass(classNamesScrollbarUnusable, !_overflowAmount.x, true); scrollbarsAddRemoveClass(classNamesScrollbarUnusable, !_overflowAmount.x, true);
scrollbarsAddRemoveClass(classNamesScrollbarUnusable, !_overflowAmount.y, false); scrollbarsAddRemoveClass(classNamesScrollbarUnusable, !_overflowAmount.y, false);
scrollbarsAddRemoveClass(classNameScrollbarRtl, _directionIsRTL); scrollbarsAddRemoveClass(classNameScrollbarRtl, _directionIsRTL && !_isBody);
} }
}, },
scrollbarsSetupState, scrollbarsSetupState,
packages/overlayscrollbars/src/styles/structure.scss
+7
View File
@@ -74,6 +74,13 @@ html.os-viewport-scrollbar-hidden::-webkit-scrollbar-corner,
background: transparent !important; background: transparent !important;
} }
html.os-viewport-scrollbar-hidden,
html.os-viewport-scrollbar-hidden > body[data-overlayscrollbars] {
box-sizing: border-box;
width: 100%;
height: 100%;
}
[data-overlayscrollbars], [data-overlayscrollbars],
.os-padding { .os-padding {
position: relative; position: relative;