leemuzi/real-time-fund
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 移动端表头滚动监听增加节流

Browse Source
This commit is contained in:
hzm
2026-03-08 12:51:04 +08:00
parent b20fd42eec
commit a8a24605d4
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/components/MobileFundTable.jsx
View File

@@ -23,6 +23,7 @@ import {
useSortable, useSortable,
} from '@dnd-kit/sortable'; } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities'; import { CSS } from '@dnd-kit/utilities';
import { throttle } from 'lodash';
import FitText from './FitText'; import FitText from './FitText';
import MobileSettingModal from './MobileSettingModal'; import MobileSettingModal from './MobileSettingModal';
import { ExitIcon, SettingsIcon, StarIcon } from './Icons'; import { ExitIcon, SettingsIcon, StarIcon } from './Icons';
@@ -308,7 +309,7 @@ export default function MobileFundTable({
return isSummaryStuck ? stickyTop + stickySummaryWrapper.offsetHeight : stickyTop; return isSummaryStuck ? stickyTop + stickySummaryWrapper.offsetHeight : stickyTop;
}; };
const handleVerticalScroll = () => { const updateVerticalState = () => {
const nextStickyTop = getEffectiveStickyTop(); const nextStickyTop = getEffectiveStickyTop();
setEffectiveStickyTop((prev) => (prev === nextStickyTop ? prev : nextStickyTop)); setEffectiveStickyTop((prev) => (prev === nextStickyTop ? prev : nextStickyTop));
@@ -321,12 +322,15 @@ export default function MobileFundTable({
setShowPortalHeader(tableRect.top <= nextStickyTop); setShowPortalHeader(tableRect.top <= nextStickyTop);
}; };
handleVerticalScroll(); const throttledVerticalUpdate = throttle(updateVerticalState, 50, { leading: true, trailing: true });
window.addEventListener('scroll', handleVerticalScroll, { passive: true });
window.addEventListener('resize', handleVerticalScroll, { passive: true }); updateVerticalState();
window.addEventListener('scroll', throttledVerticalUpdate, { passive: true });
window.addEventListener('resize', throttledVerticalUpdate, { passive: true });
return () => { return () => {
window.removeEventListener('scroll', handleVerticalScroll); window.removeEventListener('scroll', throttledVerticalUpdate);
window.removeEventListener('resize', handleVerticalScroll); window.removeEventListener('resize', throttledVerticalUpdate);
throttledVerticalUpdate.cancel();
}; };
}, [stickyTop]); }, [stickyTop]);