diff --git a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts index 67bea74..2a8ff47 100644 --- a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts +++ b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts @@ -8,7 +8,7 @@ import { XY, } from 'support'; 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 { ScrollbarsSetupElementsObj, @@ -27,12 +27,12 @@ const getPageOffset = (event: PointerEvent): XY => ({ x: event.pageX, y: event.pageY, }); -const getInvertedScale = (element: HTMLElement): XY => { +const getScale = (element: HTMLElement): XY => { const { width, height } = getBoundingClientRect(element); const { w, h } = offsetSize(element); return { - x: 1 / (Math.round(width) / w) || 1, - y: 1 / (Math.round(height) / h) || 1, + x: Math.round(width) / w || 1, + y: Math.round(height) / h || 1, }; }; const createRootClickStopPropagationEvents = (scrollbar: HTMLElement, documentElm: Document) => @@ -56,7 +56,7 @@ const createDragScrollingEvents = ( (event: PointerEvent) => { const movement = (getPageOffset(event)[xyKey] - mouseDownPageOffset) * mouseDownInvertedScale; const handleLengthRatio = - 1 / getScrollbarHandleOffsetRatio(structureSetupState(), scrollOffsetElement, isHorizontal); + 1 / getScrollbarHandleLengthRatio(structureSetupState(), isHorizontal); scrollOffsetElement[scrollOffsetKey] = mouseDownScroll + movement * handleLengthRatio; // if (_isRTL && isHorizontal && !_rtlScrollBehavior.i) scrollDelta *= -1; }; @@ -65,16 +65,17 @@ const createDragScrollingEvents = ( const { button, isPrimary, pointerId } = pointerDownEvent; 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), { _passive: false, }); const offPointerMove = on( scrollbarHandle, 'pointermove', - createOnPointerMoveHandler(mouseDownScroll, mouseDownPageOffset, mouseDownInvertedScale) + createOnPointerMoveHandler( + scrollOffsetElement[scrollOffsetKey] || 0, + getPageOffset(pointerDownEvent)[xyKey], + 1 / getScale(scrollOffsetElement)[xyKey] + ) ); on( diff --git a/packages/overlayscrollbars/src/styles/scrollbars.scss b/packages/overlayscrollbars/src/styles/scrollbars.scss index 212b97c..cb029f6 100644 --- a/packages/overlayscrollbars/src/styles/scrollbars.scss +++ b/packages/overlayscrollbars/src/styles/scrollbars.scss @@ -25,7 +25,7 @@ body > .os-scrollbar { border: none !important; } .os-scrollbar-handle { - pointer-events: auto; + pointer-events: none; position: absolute; width: 100%; height: 100%;