search

react-component / virtual-list

🧾 React Virtual List Component which worked with animation
https://rc-virtual-list.react-component.now.sh
MIT License
725 stars 154 forks source link

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

Closed hanszeng-chn closed 4 weeks ago

hanszeng-chn commented 1 month ago

🤔 This is a ...

🔗 Related Issues

💡 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

vercel[bot] commented 1 month ago

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[bot] commented 1 month ago

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 02dfd34b13a9b70144827b5e6eef959864d66f8d and 2c1b552f9df3de4c6e5d8c3cc7f1adc2ce2376f3.
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 - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: -- `I pushed a fix in commit , 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](https://docs.coderabbit.ai/guides/configure-coderabbit) 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](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
hanszeng-chn commented 4 weeks ago

@zombieJ Can you help review my pr pls?

codecov[bot] commented 4 weeks ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

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

Additional details and impacted files ```diff @@ 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 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

zombieJ commented 4 weeks ago

+ rc-virtual-list@3.14.8