Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

虚拟滚动时,当数据源发生变更时,横向滚动被重置 #1145

Closed
hairgc opened this issue Jun 18, 2024 · 0 comments · Fixed by #1146
Closed

虚拟滚动时,当数据源发生变更时,横向滚动被重置 #1145

hairgc opened this issue Jun 18, 2024 · 0 comments · Fixed by #1146

Comments

@hairgc
Copy link

hairgc commented Jun 18, 2024

前置条件:rc-table 版本 > 7.46.0

复现步骤

1、虚拟滚动时,当列比较多时出现横向滚动条,拉动滚动条至最右侧
2、修改dataSource
3、横向滚动条被重置到最左侧,应该保持。

问题定位

#1130 在此次PR中修改了虚拟滚动情况下的currentTarget 为真实的DOM

table/src/Table.tsx

Lines 485 to 494 in 0fe547b

const triggerOnScroll = () => {
if (horizonScroll && scrollBodyRef.current) {
onInternalScroll({
currentTarget: getDOM(scrollBodyRef.current),
} as React.UIEvent<HTMLDivElement>);
} else {
setPingedLeft(false);
setPingedRight(false);
}
};

但是这样导致了virtual-list ref中暴露的scrollLeft属性失效,取值变成了直接从原生dom中获取,取到的值一直为0

table/src/Table.tsx

Lines 442 to 448 in 0fe547b

const onInternalScroll = useEvent(
({ currentTarget, scrollLeft }: { currentTarget: HTMLElement; scrollLeft?: number }) => {
const isRTL = direction === 'rtl';
const mergedScrollLeft =
typeof scrollLeft === 'number' ? scrollLeft : currentTarget.scrollLeft;
const compareTarget = currentTarget || EMPTY_SCROLL_TARGET;

解决思路

优化triggerOnScroll中onInternalScroll传参,显式传入scrollLeft

 const triggerOnScroll = () => { 
   if (horizonScroll && scrollBodyRef.current) { 
     onInternalScroll({ 
       currentTarget: getDOM(scrollBodyRef.current), 
       scrollLeft: scrollBodyRef.current?.scrollLeft
     } as React.UIEvent<HTMLDivElement>); 
   } else { 
     setPingedLeft(false); 
     setPingedRight(false); 
   } 
 };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant