vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-09 20:29:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve performance on page ScrollArea by throttling scroll callback

Browse Source
This commit is contained in:
jeffvli
2025-12-27 15:48:29 -08:00
parent b573999d33
commit 9c59a38f7a
1 changed files with 21 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/native-scroll-area/native-scroll-area.tsx
+21 -24
View File
@@ -6,6 +6,7 @@ import styles from './native-scroll-area.module.css';
import { PageHeader, PageHeaderProps } from '/@/renderer/components/page-header/page-header'; import { PageHeader, PageHeaderProps } from '/@/renderer/components/page-header/page-header';
import { useWindowSettings } from '/@/renderer/store/settings.store'; import { useWindowSettings } from '/@/renderer/store/settings.store';
import { useMergedRef } from '/@/shared/hooks/use-merged-ref'; import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
import { useThrottledCallback } from '/@/shared/hooks/use-throttled-callback';
import { Platform } from '/@/shared/types/types'; import { Platform } from '/@/shared/types/types';
interface NativeScrollAreaProps { interface NativeScrollAreaProps {
@@ -26,35 +27,31 @@ const BaseNativeScrollArea = forwardRef(
const { windowBarStyle } = useWindowSettings(); const { windowBarStyle } = useWindowSettings();
const containerRef = useRef<HTMLDivElement | null>(null); const containerRef = useRef<HTMLDivElement | null>(null);
const scrollHandlerRef = useRef<null | number>(null); const scrollHandler = useThrottledCallback((e: Event) => {
if (noHeader || !pageHeaderProps) {
return;
}
const scrollElement = e?.target as HTMLDivElement;
if (!scrollElement || !containerRef.current) {
return;
}
const offset = pageHeaderProps.offset || 0;
const scrollTop = scrollElement.scrollTop;
if (scrollTop > offset) {
containerRef.current.setAttribute('data-scrolled', 'true');
} else {
containerRef.current.setAttribute('data-scrolled', 'false');
}
}, 100);
const [initialize] = useOverlayScrollbars({ const [initialize] = useOverlayScrollbars({
defer: false, defer: false,
events: { events: {
scroll: (_instance, e) => { scroll: (_instance, e) => {
if (scrollHandlerRef.current) { scrollHandler(e);
cancelAnimationFrame(scrollHandlerRef.current);
}
scrollHandlerRef.current = requestAnimationFrame(() => {
if (noHeader || !pageHeaderProps) {
return;
}
const scrollElement = e?.target as HTMLDivElement;
if (!scrollElement || !containerRef.current) {
return;
}
const offset = pageHeaderProps.offset || 0;
const scrollTop = scrollElement.scrollTop;
if (scrollTop > offset) {
containerRef.current.setAttribute('data-scrolled', 'true');
} else {
containerRef.current.setAttribute('data-scrolled', 'false');
}
});
}, },
}, },
options: { options: {