Skip to content

Comments

优化消息自动滚动逻辑:仅当接近底部(距离 < 50px)时自动滚动#1

Open
tobenot wants to merge 1 commit intosqwu:mainfrom
tobenot:parent-chat
Open

优化消息自动滚动逻辑:仅当接近底部(距离 < 50px)时自动滚动#1
tobenot wants to merge 1 commit intosqwu:mainfrom
tobenot:parent-chat

Conversation

@tobenot
Copy link

@tobenot tobenot commented Feb 7, 2025

背景

当前在消息连续到达时,页面会自动滚动到底部,这会打断用户手动查看之前消息的体验。为了解决这个问题,本次修改对自动滚动逻辑做了优化:

  • 当新的消息到达时,仅在用户位置接近底部(距离小于 50px)时,才执行自动滚动。

修改内容

  • scrollToBottom 方法调整:
    在计算列表距离底部之后,使用 50px 作为阈值,仅当小于该值时自动滚动到底部。

  • sendMessage 方法调整:
    在流式消息接收过程中以及消息发送完成后,都统一调用 scrollToBottom 方法,从而避免直接滚动到底部的强制行为。

测试建议

  1. 保持在消息列表底部时,发送消息后页面能自动滚动。
  2. 当用户主动滚动向上查看历史消息时,新的消息到来不会打断当前阅读位置。

预期效果

  • 新消息到来时,仅在用户接近底部(距离小于 50px)时自动滚动,确保用户在查看旧消息时不会被打断。
  • 当用户处于阅读最新消息状态时,自动滚动依然有效。

请审查该 PR 并提出建议,谢谢!

在更新 scrollToBottom 方法中添加了滚动位置检测,只有当消息列表距离底部小于 50px 时,才自动滚动到底部。
这样既能在用户保持在底部时自动滚动,同时在用户浏览之前的消息时不会强制滚动,改善了用户体验。

修改内容包括:
- 在 scrollToBottom 方法内部计算距离底部的距离,并使用 50px 作为阈值;
- 在 sendMessage 方法中,通过调用 scrollToBottom 方法来统一判断是否自动滚动。

测试过程中确认:
- 用户主动向上滚动查看旧消息时,不会被新的消息打断。
- 在发送新消息时,仍然能够在接近底部时自动滚动以便看到最新内容。

无其他功能上的影响。
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 this pull request may close these issues.

1 participant