diff --git a/packages/overlayscrollbars/src/classnames.ts b/packages/overlayscrollbars/src/classnames.ts index 98f406e..9f0d1d9 100644 --- a/packages/overlayscrollbars/src/classnames.ts +++ b/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`; diff --git a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts index 189a133..046b662 100644 --- a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts +++ b/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(); diff --git a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts index d1ea2ca..16fd5fa 100644 --- a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts +++ b/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); diff --git a/packages/overlayscrollbars/src/styles/scrollbars.scss b/packages/overlayscrollbars/src/styles/scrollbars.scss index e7b47ff..9624ef4 100644 --- a/packages/overlayscrollbars/src/styles/scrollbars.scss +++ b/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;