set scroll-behavior to 'auto' when pressing any scrollbar

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';

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),
+        attrClass.bind(0, hostElm, dataAttributeHost, dataValueHostScrollbarPressed),
-        on(doc, 'selectstart', (event: Event) => preventDefault(event), {
+        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,

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;

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';

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;

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';

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();
 

packages/overlayscrollbars/test/playwright/setups/structureSetup/update/index.scss

@@ -1,3 +1,6 @@
+* {
+  scroll-behavior: smooth;
+}
 body {
   display: flex;
   flex-direction: column;