mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-23 14:10:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

use debounce for window resize

Browse Source
This commit is contained in:
Rene Haas
2022-11-04 01:00:11 +01:00
parent d4fcf316ef
commit ce997790ab
3 changed files with 11 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/src/environment.ts
+2 -3
View File
@@ -17,7 +17,7 @@ import {
createCache, createCache,
equalXY, equalXY,
createEventListenerHub, createEventListenerHub,
selfClearTimeout, debounce,
} from '~/support'; } from '~/support';
import { import {
classNameEnvironment, classNameEnvironment,
@@ -183,7 +183,6 @@ const createEnvironment = (): InternalEnvironment => {
const envDOM = createDOM(`<div class="${classNameEnvironment}"><div></div></div>`); const envDOM = createDOM(`<div class="${classNameEnvironment}"><div></div></div>`);
const envElm = envDOM[0] as HTMLElement; const envElm = envDOM[0] as HTMLElement;
const envChildElm = envElm.firstChild as HTMLElement; const envChildElm = envElm.firstChild as HTMLElement;
const [requestResizeAnimationFrame] = selfClearTimeout();
const [addEvent, , triggerEvent] = createEventListenerHub<EnvironmentEventMap>(); const [addEvent, , triggerEvent] = createEventListenerHub<EnvironmentEventMap>();
const [updateNativeScrollbarSizeCache, getNativeScrollbarSizeCache] = createCache( const [updateNativeScrollbarSizeCache, getNativeScrollbarSizeCache] = createCache(
{ {
@@ -251,7 +250,7 @@ const createEnvironment = (): InternalEnvironment => {
// needed in case content has css viewport units // needed in case content has css viewport units
windowAddEventListener( windowAddEventListener(
'resize', 'resize',
requestResizeAnimationFrame.bind(0, triggerEvent.bind(0, 'r', [])) debounce(triggerEvent.bind(0, 'r', []), { _timeout: 33, _maxDelay: 99 })
); );
if (!nativeScrollbarsHiding && (!nativeScrollbarsOverlaid.x || !nativeScrollbarsOverlaid.y)) { if (!nativeScrollbarsHiding && (!nativeScrollbarsOverlaid.x || !nativeScrollbarsOverlaid.y)) {
packages/overlayscrollbars/src/overlayscrollbars.ts
+6 -2
View File
@@ -237,7 +237,8 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = (
options?: PartialOptions, options?: PartialOptions,
eventListeners?: EventListeners eventListeners?: EventListeners
) => { ) => {
const { _getDefaultOptions, _getDefaultInitialization, _addZoomListener } = getEnvironment(); const { _getDefaultOptions, _getDefaultInitialization, _addZoomListener, _addResizeListener } =
getEnvironment();
const plugins = getPlugins(); const plugins = getPlugins();
const targetIsElement = isHTMLElement(target); const targetIsElement = isHTMLElement(target);
const instanceTarget = targetIsElement ? target : target.target; const instanceTarget = targetIsElement ? target : target.target;
@@ -270,10 +271,13 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = (
); );
const update = (changedOptions: PartialOptions, force?: boolean): boolean => const update = (changedOptions: PartialOptions, force?: boolean): boolean =>
updateStructure(changedOptions, !!force); 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) => { const destroy = (canceled?: boolean) => {
removeInstance(instanceTarget); removeInstance(instanceTarget);
removeZoomListener(); removeZoomListener();
removeResizeListener();
destroyScrollbars(); destroyScrollbars();
destroyStructure(); destroyStructure();
packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts
+3 -11
View File
@@ -1,4 +1,3 @@
import { getEnvironment } from '~/environment';
import { createEventListenerHub, isEmptyObject, keys, scrollLeft, scrollTop } from '~/support'; import { createEventListenerHub, isEmptyObject, keys, scrollLeft, scrollTop } from '~/support';
import { createState, createOptionCheck } from '~/setups/setups'; import { createState, createOptionCheck } from '~/setups/setups';
import { createStructureSetupElements } from '~/setups/structureSetup/structureSetup.elements'; import { createStructureSetupElements } from '~/setups/structureSetup/structureSetup.elements';
@@ -70,7 +69,6 @@ export const createStructureSetup = (
target: InitializationTarget, target: InitializationTarget,
options: ReadonlyOptions options: ReadonlyOptions
): Setup<StructureSetupState, StructureSetupStaticState, [], boolean> => { ): Setup<StructureSetupState, StructureSetupStaticState, [], boolean> => {
const { _addResizeListener } = getEnvironment();
const checkOptionsFallback = createOptionCheck(options, {}); const checkOptionsFallback = createOptionCheck(options, {});
const state = createState(initialStructureSetupUpdateState); const state = createState(initialStructureSetupUpdateState);
const [addEvent, removeEvent, triggerEvent] = createEventListenerHub<StructureSetupEventMap>(); const [addEvent, removeEvent, triggerEvent] = createEventListenerHub<StructureSetupEventMap>();
@@ -89,15 +87,10 @@ export const createStructureSetup = (
} }
return changed; return changed;
}; };
const updateWithHints = (updateHints: Partial<StructureSetupUpdateHints>) =>
triggerUpdateEvent(updateStructure(checkOptionsFallback, updateHints), {}, false);
const [destroyObservers, appendObserverElements, updateObservers, updateObserversOptions] = const [destroyObservers, appendObserverElements, updateObservers, updateObserversOptions] =
createStructureSetupObservers(elements, setState, updateWithHints); createStructureSetupObservers(elements, setState, (updateHints) =>
const removeResizeListener = _addResizeListener( triggerUpdateEvent(updateStructure(checkOptionsFallback, updateHints), {}, false)
updateWithHints.bind(0, { );
_contentMutation: true,
})
);
const structureSetupState = getState.bind(0) as (() => StructureSetupState) & const structureSetupState = getState.bind(0) as (() => StructureSetupState) &
StructureSetupStaticState; StructureSetupStaticState;
@@ -130,7 +123,6 @@ export const createStructureSetup = (
removeEvent(); removeEvent();
destroyObservers(); destroyObservers();
destroyElements(); destroyElements();
removeResizeListener();
}, },
]; ];
}; };