fix: fix tabs scroll slowly in some version #658
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Conflicting |
Walkthrough此次更改涉及 Changes
Poem
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
src/util.ts (2)
29-31:isLineMode函数实现正确。这个函数很好地实现了检查滚轮事件是否处于行模式的功能。为了提高可读性，您可以考虑使用常量来表示
WheelEvent.DOM_DELTA_LINE。建议的改进：
+ const DOM_DELTA_LINE = WheelEvent.DOM_DELTA_LINE; export function isLineMode(event: WheelEvent) { - return event.deltaMode === WheelEvent.DOM_DELTA_LINE + return event.deltaMode === DOM_DELTA_LINE; }这样可以提高代码的可读性和可维护性。
33-42:getWheelDeltaOfPx函数实现正确，但有改进空间。这个函数很好地实现了将滚轮事件的 delta 值转换为像素值的功能。然而，有几点可以改进：
- 使用对象返回值而不是数组可能会更清晰。
- 将缩放因子 (100/3) 提取为一个命名常量可以提高可读性和可维护性。
- 可以使用对象解构来简化代码。
建议的改进：
+ const LINE_HEIGHT_PX = 100 / 3; - export function getWheelDeltaOfPx(event: WheelEvent) { - const { deltaX, deltaY } = event - const deltaXOfPx = isLineMode(event) - ? deltaX * 100 / 3 - : deltaX; - const deltaYOfPx = isLineMode(event) - ? deltaY * 100 / 3 - : deltaY; - return [deltaXOfPx, deltaYOfPx] - } + export function getWheelDeltaOfPx(event: WheelEvent): { deltaXOfPx: number; deltaYOfPx: number } { + const { deltaX, deltaY } = event; + const scale = isLineMode(event) ? LINE_HEIGHT_PX : 1; + return { + deltaXOfPx: deltaX * scale, + deltaYOfPx: deltaY * scale + }; + }这些改变将使函数更易于理解和维护，同时保持其功能不变。
src/hooks/useTouchMove.ts (1)
Line range hint
1-138: 总体评价：改动看起来是朝着正确的方向进行的。这些更改针对性地解决了 Firefox 72.0 中标签滚动缓慢的问题，主要通过引入新的
getWheelDeltaOfPx函数来计算滚轮增量值。这种方法可能提供了更一致的跨浏览器体验。建议：
- 确保在多个浏览器版本（特别是 Firefox 72.0）中测试这些更改。
- 考虑添加注释，解释为什么需要这种特殊处理，以便将来的维护。
- 更新相关文档，说明这个修复解决的具体问题。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- src/hooks/useTouchMove.ts (2 hunks)
- src/util.ts (2 hunks)
🔇 Additional comments (4)
src/util.ts (2)
1-1: 导入语句修改看起来没有问题。这个修改似乎是为了适应新的TypeScript配置或React版本。它不会影响代码的功能。
Line range hint
1-43: 总结：这些更改很好地解决了PR的目标。新添加的
isLineMode和getWheelDeltaOfPx函数直接针对了在某些Firefox版本（特别是72.0版本）中标签滚动缓慢的问题。通过将基于行的滚动转换为基于像素的滚动，这些更改应该能够改善滚动性能。代码实现总体上是正确的，但有一些小的改进空间，主要是为了提高可读性和可维护性。建议在合并之前考虑实施这些改进。
src/hooks/useTouchMove.ts (2)
2-3: 导入语句的更改看起来不错。导入语句的重新排序提高了可读性。新导入的
getWheelDeltaOfPx函数表明滚轮增量值的计算方式发生了变化，这可能与修复 Firefox 72.0 中标签滚动缓慢的问题有关。
84-84:onWheel函数的修改看起来是正确的方向。使用
getWheelDeltaOfPx函数来获取deltaX和deltaY的做法很好，这可能有助于解决 Firefox 72.0 中标签滚动缓慢的问题。这种方法可能提供了一种更一致的方式来计算不同浏览器的滚轮增量。为了确保这个改动的有效性和兼容性，建议运行以下脚本来检查
getWheelDeltaOfPx函数的实现：这将帮助我们了解
getWheelDeltaOfPx函数的实现细节和它在代码库中的使用情况，从而更好地评估这个改动的影响。✅ Verification successful
为了解决之前的错误，请运行以下脚本以验证
getWheelDeltaOfPx函数的使用情况：
onWheel函数的修改已通过验证，未发现问题。🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 描述：验证 getWheelDeltaOfPx 函数的实现 # 测试：搜索 getWheelDeltaOfPx 函数的定义 echo "Searching for getWheelDeltaOfPx function definition:" ast-grep --lang typescript --pattern $'function getWheelDeltaOfPx($_) { $$$ }' # 测试：搜索 getWheelDeltaOfPx 函数的使用情况 echo "Searching for getWheelDeltaOfPx function usage:" rg --type typescript 'getWheelDeltaOfPx'Length of output: 805
Script:
# 描述：重新验证 getWheelDeltaOfPx 函数的使用情况 # 搜索 getWheelDeltaOfPx 函数的使用情况，限制为 .ts 文件 echo "Searching for getWheelDeltaOfPx function usage in .ts files:" rg 'getWheelDeltaOfPx' -g "*.ts" -A 2Length of output: 655
|
这个问题在 Firefox 最新的版本中还存在么？如何重现？ |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #658 +/- ##
==========================================
- Coverage 97.72% 97.47% -0.25%
==========================================
Files 18 18
Lines 702 713 +11
Branches 200 199 -1
==========================================
+ Hits 686 695 +9
- Misses 16 18 +2 ☔ View full report in Codecov by Sentry. |
add the conversion of line number to pixel value when the scroll value is line number in the wheel event
related issue: Tabs scroll slowly in firefox some version such as 72.0 #657
Summary by CodeRabbit
新功能
isLineMode和getWheelDeltaOfPx函数，以改进对滚轮事件的处理。改进
onWheel函数，使用新的工具函数获取滚轮事件的增量值。