improve code

packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts

@@ -26,9 +26,9 @@ export type ScrollbarsSetupEvents = (
 ) => () => void;
 
 const { round } = Math;
-const getPageOffset = (event: PointerEvent): XY<number> => ({
-  x: event.pageX,
-  y: event.pageY,
+const getClientOffset = (event: PointerEvent): XY<number> => ({
+  x: event.clientX,
+  y: event.clientY,
 });
 const getScale = (element: HTMLElement): XY<number> => {
   const { width, height } = getBoundingClientRect(element);
@@ -74,10 +74,11 @@ const createDragScrollingEvents = (
   const xyKey = `${isHorizontal ? 'x' : 'y'}`;
   const whKey = `${isHorizontal ? 'w' : 'h'}`;
   const createOnPointerMoveHandler =
-    (mouseDownScroll: number, mouseDownPageOffset: number, mouseDownInvertedScale: number) =>
+    (mouseDownScroll: number, mouseDownClientOffset: number, mouseDownInvertedScale: number) =>
     (event: PointerEvent) => {
       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 scrollDeltaPercent = movement / handleTrackDiff;
       const scrollDelta = scrollDeltaPercent * _overflowAmount[xyKey];
@@ -98,7 +99,7 @@ const createDragScrollingEvents = (
         'pointermove',
         createOnPointerMoveHandler(
           scrollOffsetElement[scrollOffsetKey] || 0,
-          getPageOffset(pointerDownEvent)[xyKey],
+          getClientOffset(pointerDownEvent)[xyKey],
           1 / getScale(scrollOffsetElement)[xyKey]
         )
       );

packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts

@@ -137,13 +137,13 @@ export const createScrollbarsSetup = (
     cancelMouseMoveAnimationFrame,
     destroyElements,
 
-    on(_host, 'mouseover', onHostMouseEnter, { _once: true }),
-    on(_host, 'mouseenter', onHostMouseEnter),
-    on(_host, 'mouseleave', () => {
+    on(_host, 'pointerover', onHostMouseEnter, { _once: true }),
+    on(_host, 'pointerenter', onHostMouseEnter),
+    on(_host, 'pointerleave', () => {
       mouseInHost = false;
       autoHideIsLeave && manageScrollbarsAutoHide(false);
     }),
-    on(_host, 'mousemove', () => {
+    on(_host, 'pointermove', () => {
       autoHideIsMove &&
         requestMouseMoveAnimationFrame(() => {
           clearScrollTimeout();
@@ -235,7 +235,7 @@ export const createScrollbarsSetup = (
 
         scrollbarsAddRemoveClass(classNamesScrollbarUnusable, !_overflowAmount.x, true);
         scrollbarsAddRemoveClass(classNamesScrollbarUnusable, !_overflowAmount.y, false);
-        scrollbarsAddRemoveClass(classNameScrollbarRtl, _directionIsRTL);
+        scrollbarsAddRemoveClass(classNameScrollbarRtl, _directionIsRTL && !_isBody);
       }
     },
     scrollbarsSetupState,

packages/overlayscrollbars/src/styles/structure.scss

@@ -74,6 +74,13 @@ html.os-viewport-scrollbar-hidden::-webkit-scrollbar-corner,
   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],
 .os-padding {
   position: relative;