use-ref - useRef、useLayoutEffect、Element.scrollTo 每次都不工作
问题描述
我有一张带刷新功能的桌子。我希望能够在刷新时保持用户在表中的位置。现在这将在大多数情况下工作,但偶尔它会滚动回元素的顶部。
常量 scrollYRef = useRef(0); const tableRef = useRef<HTMLDivElement | 空>(空);
const handleScroll = (): void => {
if (!!tableRef.current) {
tableRef.current.addEventListener("scroll", (e: Event): void => {
if (!!tableRef.current && tableRef.current !== null) {
if ((e.target as HTMLDivElement).scrollTop || scrollYRef.current === 1) {
scrollYRef.current = (e.target as HTMLDivElement).scrollTop;
}
}
});
}
};
useEffect(handleScroll, []);
useEffect(() => {
const current = tableRef.current;
if (!!current) {
if (current.scrollTop === 0 && scrollYRef.current > 100 && pagedEmployeeInfo.length) {
requestAnimationFrame(() => {
if (current) {
current.scrollTo({ left: current.scrollLeft, top: scrollYRef.current });
}
});
}
}
}, [pagedEmployeeInfo]);
解决方案
推荐阅读
- c# - 查找哪些单元格应用了下拉过滤器 - Interop Excel
- angular - 从字符串中提取特定值
- c# - 设置过大的 MaxJsonDeserializerMembers 有什么安全风险?
- ruby-on-rails - 在 Rubymine 中运行 rails 时找不到图像
- python - 使用名为“pk”的 URL 关键字参数调用的预期视图 ShowImageList
- php - 如何在 php 单元测试中模拟日期?
- audio - 什么是音频 PCM 的帧同步字来识别开始位置
- python - python中整数除法和float到int转换之间差异的原因是什么?
- python - Django在模板上打印两个具有多对多关系的模型
- c# - 在 Xamarin 表单中触发属性更改方法