diff --git a/packages/overlayscrollbars/src/environment.ts b/packages/overlayscrollbars/src/environment.ts
index 0e49176..b235dfd 100644
--- a/packages/overlayscrollbars/src/environment.ts
+++ b/packages/overlayscrollbars/src/environment.ts
@@ -17,7 +17,7 @@ import {
createCache,
equalXY,
createEventListenerHub,
- selfClearTimeout,
+ debounce,
} from '~/support';
import {
classNameEnvironment,
@@ -183,7 +183,6 @@ const createEnvironment = (): InternalEnvironment => {
const envDOM = createDOM(`
`);
const envElm = envDOM[0] as HTMLElement;
const envChildElm = envElm.firstChild as HTMLElement;
- const [requestResizeAnimationFrame] = selfClearTimeout();
const [addEvent, , triggerEvent] = createEventListenerHub();
const [updateNativeScrollbarSizeCache, getNativeScrollbarSizeCache] = createCache(
{
@@ -251,7 +250,7 @@ const createEnvironment = (): InternalEnvironment => {
// needed in case content has css viewport units
windowAddEventListener(
'resize',
- requestResizeAnimationFrame.bind(0, triggerEvent.bind(0, 'r', []))
+ debounce(triggerEvent.bind(0, 'r', []), { _timeout: 33, _maxDelay: 99 })
);
if (!nativeScrollbarsHiding && (!nativeScrollbarsOverlaid.x || !nativeScrollbarsOverlaid.y)) {
diff --git a/packages/overlayscrollbars/src/overlayscrollbars.ts b/packages/overlayscrollbars/src/overlayscrollbars.ts
index 89029be..f2ee169 100644
--- a/packages/overlayscrollbars/src/overlayscrollbars.ts
+++ b/packages/overlayscrollbars/src/overlayscrollbars.ts
@@ -237,7 +237,8 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = (
options?: PartialOptions,
eventListeners?: EventListeners
) => {
- const { _getDefaultOptions, _getDefaultInitialization, _addZoomListener } = getEnvironment();
+ const { _getDefaultOptions, _getDefaultInitialization, _addZoomListener, _addResizeListener } =
+ getEnvironment();
const plugins = getPlugins();
const targetIsElement = isHTMLElement(target);
const instanceTarget = targetIsElement ? target : target.target;
@@ -270,10 +271,13 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = (
);
const update = (changedOptions: PartialOptions, force?: boolean): boolean =>
updateStructure(changedOptions, !!force);
- const removeZoomListener = _addZoomListener(update.bind(0, {}, true));
+ const forceUpdate = update.bind(0, {}, true);
+ const removeZoomListener = _addZoomListener(forceUpdate);
+ const removeResizeListener = _addResizeListener(forceUpdate);
const destroy = (canceled?: boolean) => {
removeInstance(instanceTarget);
removeZoomListener();
+ removeResizeListener();
destroyScrollbars();
destroyStructure();
diff --git a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts
index be0fe12..fb56640 100644
--- a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts
+++ b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts
@@ -1,4 +1,3 @@
-import { getEnvironment } from '~/environment';
import { createEventListenerHub, isEmptyObject, keys, scrollLeft, scrollTop } from '~/support';
import { createState, createOptionCheck } from '~/setups/setups';
import { createStructureSetupElements } from '~/setups/structureSetup/structureSetup.elements';
@@ -70,7 +69,6 @@ export const createStructureSetup = (
target: InitializationTarget,
options: ReadonlyOptions
): Setup => {
- const { _addResizeListener } = getEnvironment();
const checkOptionsFallback = createOptionCheck(options, {});
const state = createState(initialStructureSetupUpdateState);
const [addEvent, removeEvent, triggerEvent] = createEventListenerHub();
@@ -89,15 +87,10 @@ export const createStructureSetup = (
}
return changed;
};
- const updateWithHints = (updateHints: Partial) =>
- triggerUpdateEvent(updateStructure(checkOptionsFallback, updateHints), {}, false);
const [destroyObservers, appendObserverElements, updateObservers, updateObserversOptions] =
- createStructureSetupObservers(elements, setState, updateWithHints);
- const removeResizeListener = _addResizeListener(
- updateWithHints.bind(0, {
- _contentMutation: true,
- })
- );
+ createStructureSetupObservers(elements, setState, (updateHints) =>
+ triggerUpdateEvent(updateStructure(checkOptionsFallback, updateHints), {}, false)
+ );
const structureSetupState = getState.bind(0) as (() => StructureSetupState) &
StructureSetupStaticState;
@@ -130,7 +123,6 @@ export const createStructureSetup = (
removeEvent();
destroyObservers();
destroyElements();
- removeResizeListener();
},
];
};