diff --git a/packages/overlayscrollbars/src/classnames.ts b/packages/overlayscrollbars/src/classnames.ts index 58b4521..860efa0 100644 --- a/packages/overlayscrollbars/src/classnames.ts +++ b/packages/overlayscrollbars/src/classnames.ts @@ -8,6 +8,7 @@ export const dataAttributeHostOverflowX = `${dataAttributeHost}-overflow-x`; export const dataAttributeHostOverflowY = `${dataAttributeHost}-overflow-y`; export const dataValueHostOverflowVisible = 'overflowVisible'; export const dataValueHostScrollbarHidden = 'scrollbarHidden'; +export const dataValueHostScrollbarPressed = 'scrollbarPressed'; export const dataValueHostUpdating = 'updating'; export const classNamePadding = 'os-padding'; export const classNameViewport = 'os-viewport'; diff --git a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts index bce46c6..08e26bf 100644 --- a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts +++ b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts @@ -10,6 +10,7 @@ import { parent, closest, push, + attrClass, } from '~/support'; import { getPlugins, clickScrollPluginName } from '~/plugins'; import { getEnvironment } from '~/environment'; @@ -17,6 +18,8 @@ import { classNameScrollbarHandle, classNameScrollbarInteraction, classNameScrollbarWheel, + dataAttributeHost, + dataValueHostScrollbarPressed, } from '~/classnames'; import type { XY } from '~/support'; import type { ClickScrollPluginInstance } from '~/plugins'; @@ -71,7 +74,8 @@ const releasePointerCaptureEvents = 'pointerup pointerleave pointercancel lostpo const createInteractiveScrollEvents = ( options: ReadonlyOptions, - doc: Document, + hostElm: HTMLElement, + documentElm: Document, scrollbarStructure: ScrollbarStructure, scrollOffsetElement: HTMLElement, structureSetupState: () => StructureSetupState, @@ -103,6 +107,7 @@ const createInteractiveScrollEvents = ( const isDragScroll = closest(pointerDownEvent.target as Node, `.${classNameScrollbarHandle}`) === _handle; const pointerCaptureElement = isDragScroll ? _handle : _track; + attrClass(hostElm, dataAttributeHost, dataValueHostScrollbarPressed, true); if (continuePointerDown(pointerDownEvent, options, isDragScroll)) { const instantClickScroll = !isDragScroll && pointerDownEvent.shiftKey; @@ -128,8 +133,9 @@ const createInteractiveScrollEvents = ( }; const offFns = [ - on(doc, releasePointerCaptureEvents, releasePointerCapture), - on(doc, 'selectstart', (event: Event) => preventDefault(event), { + attrClass.bind(0, hostElm, dataAttributeHost, dataValueHostScrollbarPressed), + on(documentElm, releasePointerCaptureEvents, releasePointerCapture), + on(documentElm, 'selectstart', (event: Event) => preventDefault(event), { _passive: false, }), on(_track, releasePointerCaptureEvents, releasePointerCapture), @@ -222,6 +228,7 @@ export const createScrollbarsSetupEvents = createRootClickStopPropagationEvents(_scrollbar, documentElm), createInteractiveScrollEvents( options, + hostElm, documentElm, scrollbarStructure, scrollOffsetElm, diff --git a/packages/overlayscrollbars/src/styles/structure.scss b/packages/overlayscrollbars/src/styles/structure.scss index f801c93..af806fe 100644 --- a/packages/overlayscrollbars/src/styles/structure.scss +++ b/packages/overlayscrollbars/src/styles/structure.scss @@ -168,6 +168,11 @@ html[data-overlayscrollbars] > body { overflow-y: scroll; } +[data-overlayscrollbars~='scrollbarPressed'], +[data-overlayscrollbars~='scrollbarPressed'] .os-viewport { + scroll-behavior: auto !important; +} + .os-padding, .os-viewport { overflow: hidden; diff --git a/packages/overlayscrollbars/src/support/dom/index.ts b/packages/overlayscrollbars/src/support/dom/index.ts index 39f105b..7222a2b 100644 --- a/packages/overlayscrollbars/src/support/dom/index.ts +++ b/packages/overlayscrollbars/src/support/dom/index.ts @@ -1,4 +1,3 @@ -export * from '~/support/dom/animation'; export * from '~/support/dom/attribute'; export * from '~/support/dom/class'; export * from '~/support/dom/create'; diff --git a/packages/overlayscrollbars/src/support/dom/animation.ts b/packages/overlayscrollbars/src/support/utils/animation.ts similarity index 97% rename from packages/overlayscrollbars/src/support/dom/animation.ts rename to packages/overlayscrollbars/src/support/utils/animation.ts index 458d2bb..77f87fb 100644 --- a/packages/overlayscrollbars/src/support/dom/animation.ts +++ b/packages/overlayscrollbars/src/support/utils/animation.ts @@ -28,7 +28,7 @@ export const animateNumber = ( ): ((complete?: boolean) => void) => { let animationFrameId = 0; const timeStart = animationCurrentTime(); - const finalDuration = Math.max(0, duration); + const finalDuration = max(0, duration); const frame = (complete?: boolean) => { const timeNow = animationCurrentTime(); const timeElapsed = timeNow - timeStart; diff --git a/packages/overlayscrollbars/src/support/utils/index.ts b/packages/overlayscrollbars/src/support/utils/index.ts index babfab4..5eddb9f 100644 --- a/packages/overlayscrollbars/src/support/utils/index.ts +++ b/packages/overlayscrollbars/src/support/utils/index.ts @@ -1,3 +1,4 @@ +export * from '~/support/utils/animation'; export * from '~/support/utils/array'; export * from '~/support/utils/equal'; export * from '~/support/utils/function'; diff --git a/packages/overlayscrollbars/test/jest-jsdom/support/dom/animation.test.ts b/packages/overlayscrollbars/test/jest-jsdom/support/utils/animation.test.ts similarity index 98% rename from packages/overlayscrollbars/test/jest-jsdom/support/dom/animation.test.ts rename to packages/overlayscrollbars/test/jest-jsdom/support/utils/animation.test.ts index 7b4fcda..fb8e607 100644 --- a/packages/overlayscrollbars/test/jest-jsdom/support/dom/animation.test.ts +++ b/packages/overlayscrollbars/test/jest-jsdom/support/utils/animation.test.ts @@ -1,4 +1,4 @@ -import { animateNumber } from '~/support/dom/animation'; +import { animateNumber } from '~/support/utils/animation'; jest.useFakeTimers(); diff --git a/packages/overlayscrollbars/test/playwright/setups/structureSetup/update/index.scss b/packages/overlayscrollbars/test/playwright/setups/structureSetup/update/index.scss index 5f56307..46d9ad9 100644 --- a/packages/overlayscrollbars/test/playwright/setups/structureSetup/update/index.scss +++ b/packages/overlayscrollbars/test/playwright/setups/structureSetup/update/index.scss @@ -1,3 +1,6 @@ +* { + scroll-behavior: smooth; +} body { display: flex; flex-direction: column;