Conversation
…ing long messages
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
动机与背景 (Motivation)
在编辑长度超过视口高度的长消息时,当用户滚动至消息中下部键入字符、换行或操作光标时,视口会被强制拉回消息顶部附近的固定偏移位置。
根因分析表明:
uiHelperFunctions.autoResizeTextarea在测量高度时执行了textarea.style.height = 'auto',导致多行文本框高度瞬间骤缩;.chat-messages-container)总内容高度剧烈崩塌,触发 Chromium 底层scrollTop <= scrollHeight - clientHeight约束,无条件将scrollTop强制截断(Clamping)到顶部附近;scrollTop无法自发还原,导致视口剧烈跳动。解决方案与架构 (Solution)
遵循“解决问题而非设置限制”的原则,不施加任何最大高度限制,长文本依然支持无界自由展开,采用双轨治本机制:
modules/ui-helpers.js):style.height重置为auto之前,捕获向上最近滚动容器的真实savedScrollTop;minHeight撑住物理空间,阻止父级滚动条空间瞬间崩塌;savedScrollTop,维持单帧内滚动坐标的单调性与连续性。styles/chat.css):.message-edit-textarea启用现代field-sizing: content与overflow-y: hidden、resize: vertical,交由排版引擎原生自适应高度,免除 JS 回流抖动。modules/renderer/messageContextMenu.js):textarea.focus({ preventScroll: true }),杜绝因焦点捕获引发的异常位移。验证情况 (Testing)
v工程真好用,许愿式修bug真不赖。