diff --git a/package.json b/package.json index 9a9226f4e..e6018f5d2 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"", "test": "vitest --watch false", "coverage": "vitest run --coverage", - "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish", + "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish --any-branch", "lint": "eslint src/ --ext .tsx,.ts", "tsc": "tsc -p tsconfig.json --noEmit", "now-build": "npm run docs:build", diff --git a/src/stickyScrollBar.tsx b/src/stickyScrollBar.tsx index 071e68494..da0cad2c4 100644 --- a/src/stickyScrollBar.tsx +++ b/src/stickyScrollBar.tsx @@ -92,6 +92,8 @@ const StickyScrollBar: React.ForwardRefRenderFunction { + raf.cancel(rafRef.current); + rafRef.current = raf(() => { if (!scrollBodyRef.current) { return; @@ -144,13 +146,27 @@ const StickyScrollBar: React.ForwardRefRenderFunction { - const onScrollListener = addEventListener(container, 'scroll', checkScrollBarVisible, false); - const onResizeListener = addEventListener(window, 'resize', checkScrollBarVisible, false); + if (!scrollBodyRef.current) return; + + const scrollParents: HTMLElement[] = []; + let parent: HTMLElement = scrollBodyRef.current; + while (parent) { + scrollParents.push(parent); + parent = parent.parentElement; + } + + scrollParents.forEach(p => p.addEventListener('scroll', checkScrollBarVisible, false)); + window.addEventListener('resize', checkScrollBarVisible, false); + window.addEventListener('scroll', checkScrollBarVisible, false); + container.addEventListener('scroll', checkScrollBarVisible, false); return () => { - onScrollListener.remove(); - onResizeListener.remove(); + scrollParents.forEach(p => p.removeEventListener('scroll', checkScrollBarVisible)); + window.removeEventListener('resize', checkScrollBarVisible); + window.removeEventListener('scroll', checkScrollBarVisible); + container.removeEventListener('scroll', checkScrollBarVisible); }; }, [container]);