fix: can't scroll the document on Firefox #287

hanszeng-chn · 2024-09-20T02:33:36Z

🤔 This is a ...

🐞 Bug fix

🔗 Related Issues

close Table with virtual={true} doesn't register scroll of the page in Firefox browser ant-design/ant-design#49399

💡 Background and Solution

The scroll event is prevented on Firefox. Even when scrolling up during the list is already at top.

Solution: Don't prevent the scroll event when scrolling up/down on the List which is already at top/bottom

Language	Changelog
🇺🇸 English	fix: can't scroll the document on Firefox
🇨🇳 Chinese	fix: 在Firefox浏览器中，无法滚动文档的问题

Summary by CodeRabbit

新特性
- 改进了Firefox浏览器中的鼠标滚动事件处理，增强了用户在滚动列表时的体验。
测试
- 增加了针对Firefox环境下滚动行为的新测试用例，提升了对边界情况下滚动行为的测试覆盖率。

vercel · 2024-09-20T02:33:41Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
virtual-list	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 20, 2024 2:34am

coderabbitai · 2024-09-20T02:33:58Z

Walkthrough

此更改主要集中在 src/List.tsx 中对 RawList 函数的修改，以增强 Firefox 浏览器中的鼠标滚动事件处理。通过引入 isScrollAtTop 和 isScrollAtBottom 标志，改善了在列表顶部和底部的滚动限制检查。此外，tests/scroll-Firefox.test.js 中增加了三个新的测试用例，以验证在 Firefox 环境中处理 MozMousePixelScroll 事件的行为。

Changes

文件	更改摘要
src/List.tsx	修改 `RawList` 函数以改进 Firefox 中的鼠标滚动事件处理，增加滚动限制检查。更新 `useLayoutEffect` 的依赖数组。
tests/scroll-Firefox.test.js	添加三个新测试用例，验证 Firefox 中的 `MozMousePixelScroll` 事件行为。

Assessment against linked issues

Objective	Addressed	Explanation
解决 Firefox 中虚拟表格无法注册页面滚动的问题 (#49399)	✅

在兔子乐园，滚动如风，
Firefox 中的表格，快来相逢。
鼠标轻触，页面随之动，
测试覆盖，问题不再重。
代码更新，欢声笑语，
兔子跳跃，庆祝这美好时光！ 🐰✨

Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 02dfd34 and 2c1b552.

Files selected for processing (2)

src/List.tsx (2 hunks)
tests/scroll-Firefox.test.js (1 hunks)

Additional comments not posted (4)

tests/scroll-Firefox.test.js (3)

88-103: 测试用例没有问题！

这个测试用例验证了当触发 MozMousePixelScroll 事件并且 detail 值为正数时，preventDefault 方法会被调用。这确保了列表组件能正确处理向下滚动的情况，阻止默认的滚动行为。

105-120: 测试用例没有问题！

这个测试用例验证了当在列表顶部触发 MozMousePixelScroll 事件并且 detail 值为负数时，preventDefault 方法不会被调用。这确保了列表组件能正确处理在顶部边界尝试向上滚动的情况，允许默认的滚动行为。

121-141: 测试用例没有问题！

这个测试用例验证了当在列表底部触发 MozMousePixelScroll 事件并且 detail 值为正数时，preventDefault 方法不会被调用。这确保了列表组件能正确处理在底部边界尝试向下滚动的情况，允许默认的滚动行为。

src/List.tsx (1)

Line range hint 428-447: 改进了 Firefox 中的滚动事件处理。

这些更改通过引入 isScrollAtTop 和 isScrollAtBottom 标志，增强了 Firefox 中的鼠标滚动事件处理。现在，当列表已经在顶部或底部时，onMozMousePixelScroll 事件处理程序会检查用户是否正在尝试向上或向下滚动。如果滚动在这些限制范围内，则仅在 useVirtual 为 true 时才会阻止默认的滚动行为。

此外，useLayoutEffect 的依赖数组已更新，包括 isScrollAtTop 和 isScrollAtBottom。这确保了滚动处理逻辑会在这些状态发生变化时重新运行，从而提高了滚动处理的响应性。

这些改进增强了 Firefox 中的用户体验，允许在列表位于顶部或底部时文档仍然可以滚动。

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
-- I pushed a fix in commit <commit_id>, please review it.
-- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
-- @coderabbitai generate unit testing code for this file.
-- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
-- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
-- @coderabbitai read src/utils.ts and generate unit testing code.
-- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
-- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

hanszeng-chn · 2024-09-26T03:03:26Z

@zombieJ Can you help review my pr pls?

codecov · 2024-09-26T03:14:19Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.45%. Comparing base (02dfd34) to head (2c1b552).
Report is 5 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #287   +/-   ##
=======================================
  Coverage   98.45%   98.45%           
=======================================
  Files          18       18           
  Lines         711      713    +2     
  Branches      170      172    +2     
=======================================
+ Hits          700      702    +2     
  Misses         11       11

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

zombieJ · 2024-09-26T03:30:05Z

+ rc-virtual-list@3.14.8

fix: can't scroll the document on Firefox

2c1b552

vercel bot deployed to Preview September 20, 2024 02:34 View deployment

zombieJ merged commit 2945296 into react-component:master Sep 26, 2024
11 checks passed

coderabbitai bot mentioned this pull request Dec 4, 2024

feat: mouse down to scroll #293

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: can't scroll the document on Firefox #287

fix: can't scroll the document on Firefox #287

Uh oh!

hanszeng-chn commented Sep 20, 2024 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Sep 20, 2024 •

edited

Loading

Uh oh!

coderabbitai bot commented Sep 20, 2024 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

hanszeng-chn commented Sep 26, 2024

Uh oh!

codecov bot commented Sep 26, 2024 •

edited

Loading

Uh oh!

Uh oh!

zombieJ commented Sep 26, 2024

Uh oh!

Uh oh!

fix: can't scroll the document on Firefox #287

fix: can't scroll the document on Firefox #287

Uh oh!

Conversation

hanszeng-chn commented Sep 20, 2024 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

Summary by CodeRabbit

Uh oh!

vercel bot commented Sep 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Sep 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Assessment against linked issues

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

hanszeng-chn commented Sep 26, 2024

Uh oh!

codecov bot commented Sep 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

zombieJ commented Sep 26, 2024

Uh oh!

Uh oh!

hanszeng-chn commented Sep 20, 2024 •

edited by coderabbitai bot

Loading

vercel bot commented Sep 20, 2024 •

edited

Loading

coderabbitai bot commented Sep 20, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

codecov bot commented Sep 26, 2024 •

edited

Loading