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

improve code

Browse Source
This commit is contained in:
Rene Haas
2022-07-27 01:21:07 +02:00
parent 4d4532f74d
commit 93b45cef5a
2 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts
+10 -9
View File
@@ -8,7 +8,7 @@ import {
XY, XY,
} from 'support'; } from 'support';
import { classNamesScrollbarInteraction } from 'classnames'; import { classNamesScrollbarInteraction } from 'classnames';
import { getScrollbarHandleOffsetRatio } from 'setups/scrollbarsSetup/scrollbarsSetup.calculations'; import { getScrollbarHandleLengthRatio } from 'setups/scrollbarsSetup/scrollbarsSetup.calculations';
import type { StructureSetupState } from 'setups'; import type { StructureSetupState } from 'setups';
import type { import type {
ScrollbarsSetupElementsObj, ScrollbarsSetupElementsObj,
@@ -27,12 +27,12 @@ const getPageOffset = (event: PointerEvent): XY<number> => ({
x: event.pageX, x: event.pageX,
y: event.pageY, y: event.pageY,
}); });
const getInvertedScale = (element: HTMLElement): XY<number> => { const getScale = (element: HTMLElement): XY<number> => {
const { width, height } = getBoundingClientRect(element); const { width, height } = getBoundingClientRect(element);
const { w, h } = offsetSize(element); const { w, h } = offsetSize(element);
return { return {
x: 1 / (Math.round(width) / w) || 1, x: Math.round(width) / w || 1,
y: 1 / (Math.round(height) / h) || 1, y: Math.round(height) / h || 1,
}; };
}; };
const createRootClickStopPropagationEvents = (scrollbar: HTMLElement, documentElm: Document) => const createRootClickStopPropagationEvents = (scrollbar: HTMLElement, documentElm: Document) =>
@@ -56,7 +56,7 @@ const createDragScrollingEvents = (
(event: PointerEvent) => { (event: PointerEvent) => {
const movement = (getPageOffset(event)[xyKey] - mouseDownPageOffset) * mouseDownInvertedScale; const movement = (getPageOffset(event)[xyKey] - mouseDownPageOffset) * mouseDownInvertedScale;
const handleLengthRatio = const handleLengthRatio =
1 / getScrollbarHandleOffsetRatio(structureSetupState(), scrollOffsetElement, isHorizontal); 1 / getScrollbarHandleLengthRatio(structureSetupState(), isHorizontal);
scrollOffsetElement[scrollOffsetKey] = mouseDownScroll + movement * handleLengthRatio; scrollOffsetElement[scrollOffsetKey] = mouseDownScroll + movement * handleLengthRatio;
// if (_isRTL && isHorizontal && !_rtlScrollBehavior.i) scrollDelta *= -1; // if (_isRTL && isHorizontal && !_rtlScrollBehavior.i) scrollDelta *= -1;
}; };
@@ -65,16 +65,17 @@ const createDragScrollingEvents = (
const { button, isPrimary, pointerId } = pointerDownEvent; const { button, isPrimary, pointerId } = pointerDownEvent;
if (button === 0 && isPrimary) { if (button === 0 && isPrimary) {
const mouseDownScroll = scrollOffsetElement[scrollOffsetKey] || 0;
const mouseDownPageOffset = getPageOffset(pointerDownEvent)[xyKey];
const mouseDownInvertedScale = getInvertedScale(scrollOffsetElement)[xyKey];
const offSelectStart = on(doc, 'selectstart', (event: Event) => preventDefault(event), { const offSelectStart = on(doc, 'selectstart', (event: Event) => preventDefault(event), {
_passive: false, _passive: false,
}); });
const offPointerMove = on( const offPointerMove = on(
scrollbarHandle, scrollbarHandle,
'pointermove', 'pointermove',
createOnPointerMoveHandler(mouseDownScroll, mouseDownPageOffset, mouseDownInvertedScale) createOnPointerMoveHandler(
scrollOffsetElement[scrollOffsetKey] || 0,
getPageOffset(pointerDownEvent)[xyKey],
1 / getScale(scrollOffsetElement)[xyKey]
)
); );
on( on(
packages/overlayscrollbars/src/styles/scrollbars.scss
+1 -1
View File
@@ -25,7 +25,7 @@ body > .os-scrollbar {
border: none !important; border: none !important;
} }
.os-scrollbar-handle { .os-scrollbar-handle {
pointer-events: auto; pointer-events: none;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;