fix: 实现编辑器-预览滚动同步
问题: 分屏模式下编辑器滚动时,预览面板不跟随滚动。 实现: - Editor handleScroll 计算滚动比例,派发 editor-scroll 自定义事件 - Preview 监听 editor-scroll 事件,按比例设置 preview-panel scrollTop - isSyncingRef 防止双向循环触发 原理: 编辑器 scrollTop / (scrollHeight - clientHeight) = 预览 scrollTop / (scrollHeight - clientHeight)
This commit is contained in:
@@ -118,13 +118,18 @@ export function Editor() {
|
||||
}, 150)
|
||||
}, [getActiveTab, updateTabContent, setModified, updateLineNumbers, updateFileSizeDisplay])
|
||||
|
||||
// 滚动同步
|
||||
// 滚动同步:通知 Preview 跟随滚动
|
||||
const handleScroll = useCallback(() => {
|
||||
const textarea = textareaRef.current
|
||||
if (!textarea) return
|
||||
// 行号跟随
|
||||
if (lineNumbersRef.current) {
|
||||
lineNumbersRef.current.scrollTop = textarea.scrollTop
|
||||
}
|
||||
// 计算滚动比例,派发给 Preview
|
||||
const maxScroll = textarea.scrollHeight - textarea.clientHeight
|
||||
const ratio = maxScroll > 0 ? textarea.scrollTop / maxScroll : 0
|
||||
window.dispatchEvent(new CustomEvent('editor-scroll', { detail: { ratio } }))
|
||||
}, [])
|
||||
|
||||
// Tab 键支持
|
||||
|
||||
Reference in New Issue
Block a user