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.

Sign up for GitHub

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

fix: add 1px tolerance for autoScroll #336

Merged
merged 2 commits into from
Dec 12, 2024
Merged

fix: add 1px tolerance for autoScroll #336

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1edf278
fix: add 1px tolerance for autoScroll
Dec 11, 2024
ad9f652
Merge branch 'main' into fix/BulleAutoScrollTolerance
YumoImer Dec 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion components/bubble/BubbleList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ export interface BubbleListProps extends React.HTMLAttributes<HTMLDivElement> {
roles?: RolesType;
}

const TOLERANCE = 1;

const BubbleList: React.ForwardRefRenderFunction<BubbleListRef, BubbleListProps> = (props, ref) => {
const {
prefixCls: customizePrefixCls,
Expand Down Expand Up @@ -89,7 +91,9 @@ const BubbleList: React.ForwardRefRenderFunction<BubbleListRef, BubbleListProps>
const onInternalScroll: React.UIEventHandler<HTMLDivElement> = (e) => {
const target = e.target as HTMLElement;

setScrollReachEnd(target.scrollTop + target.clientHeight === target.scrollHeight);
setScrollReachEnd(
target.scrollHeight - Math.abs(target.scrollTop) - target.clientHeight <= TOLERANCE,
);
Comment on lines +94 to +96
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

发现了不一致的滚动计算逻辑

在代码库中发现了两种不同的滚动位置计算实现：

  • components/bubble/BubbleList.tsx 使用 scrollHeight - Math.abs(scrollTop) - clientHeight <= TOLERANCE
  • components/attachments/FileList/index.tsx 使用 scrollHeight - clientHeight !== scrollTop

建议统一这两处实现的计算逻辑，以保持代码库的一致性：

  • 在 FileList 组件中也建议使用 Math.abs(scrollTop) 来处理滚动位置
  • 考虑引入相同的 TOLERANCE 值来处理误差
🔗 Analysis chain

建议验证其他组件中的滚动计算逻辑

为了保持代码库的一致性，建议检查其他组件中是否存在类似的滚动位置计算逻辑，可能也需要应用相同的优化。

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 搜索代码库中其他可能需要类似优化的滚动位置计算
rg -l "scrollHeight.*scrollTop.*clientHeight" --type tsx --type jsx

# 查找其他可能的滚动到底部检测实现
ast-grep --pattern 'scrollHeight - $_ <= $_'

Length of output: 144

Script:

#!/bin/bash
# Search for scroll-related calculations in all files
rg "scrollHeight.*scrollTop.*clientHeight"

# Search for scroll position detection patterns
rg "scrollHeight.*clientHeight"

# Search for scroll-end detection implementations
rg "setScrollReachEnd|isScrollEnd"

Length of output: 826

};

React.useEffect(() => {
Expand Down
Loading