fix timeout raf bug

packages/overlayscrollbars/src/classnames.ts

@@ -30,5 +30,6 @@ export const classNameScrollbarTrack = 'os-scrollbar-track';
 export const classNameScrollbarHandle = 'os-scrollbar-handle';
 export const classNamesScrollbarVisible = `${classNameScrollbar}-visible`;
 export const classNamesScrollbarCornerless = `${classNameScrollbar}-cornerless`;
+export const classNamesScrollbarTransitionless = `${classNameScrollbar}-transitionless`;
 export const classNamesScrollbarInteraction = `${classNameScrollbar}-interaction`;
 export const classNamesScrollbarAutoHidden = `${classNameScrollbar}-auto-hidden`;

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

@@ -3,6 +3,7 @@ import {
   appendChildren,
   createDiv,
   each,
+  isEmptyArray,
   on,
   push,
   removeClass,
@@ -16,6 +17,7 @@ import {
   classNameScrollbarTrack,
   classNameScrollbarHandle,
   classNamesScrollbarInteraction,
+  classNamesScrollbarTransitionless,
 } from 'classnames';
 import { getEnvironment } from 'environment';
 import { dynamicInitializationElement as generalDynamicInitializationElement } from 'initialization';
@@ -96,7 +98,10 @@ export const createScrollbarsSetupElements = (
       ? classNameScrollbarHorizontal
       : classNameScrollbarVertical;
     const arrToPush = horizontal ? horizontalScrollbars : verticalScrollbars;
-    const scrollbar = createDiv(`${classNameScrollbar} ${scrollbarClassName} os-theme-dark`);
+    const transitionlessClass = isEmptyArray(arrToPush) ? classNamesScrollbarTransitionless : '';
+    const scrollbar = createDiv(
+      `${classNameScrollbar} ${scrollbarClassName} ${transitionlessClass} os-theme-dark`
+    );
     const track = createDiv(classNameScrollbarTrack);
     const handle = createDiv(classNameScrollbarHandle);
     const result = {
@@ -134,6 +139,11 @@ export const createScrollbarsSetupElements = (
   const appendElements = () => {
     appendChildren(evaluatedScrollbarSlot, horizontalScrollbars[0]._scrollbar);
     appendChildren(evaluatedScrollbarSlot, verticalScrollbars[0]._scrollbar);
+
+    setTimeout(() => {
+      addRemoveClassHorizontal(classNamesScrollbarTransitionless);
+      addRemoveClassVertical(classNamesScrollbarTransitionless);
+    }, 300);
   };
 
   generateHorizontalScrollbarStructure();

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

@@ -29,8 +29,8 @@ export interface ScrollbarsSetupStaticState {
 
 const createSelfCancelTimeout = (timeout?: number | (() => number)) => {
   let id: number;
-  const setT = timeout ? (window.setTimeout as (...args: any[]) => number) : rAF!;
-  const clearT = timeout ? window.clearTimeout : cAF!;
+  const setT = timeout ? (setTimeout as (...args: any[]) => number) : rAF!;
+  const clearT = timeout ? clearTimeout : cAF!;
   return [
     (callback: () => any) => {
       clearT(id);

packages/overlayscrollbars/src/styles/scrollbars.scss

@@ -6,6 +6,9 @@
   opacity: 0;
   visibility: hidden;
 }
+.os-scrollbar-transitionless {
+  transition: none;
+}
 .os-scrollbar-track {
   pointer-events: auto;
   position: relative;