用 position: fixed 锚定右侧，transform: translatex 控制显隐，z-index > 主内容；监听局部滚动容器 scroll 事件同步 scrolltop；消息用 documentfragment 批量插入；websocket 消息需判断面板状态再渲染。
怎么用 HTML + CSS 实现可展开的侧边讨论面板
核心是用 position: fixed 锚定右侧，配合 transform 控制显隐，而不是靠 display: none 切换——后者会破坏 DOM 状态，导致输入框失焦、滚动位置丢失。
常见错误：直接用 visibility: hidden 或 opacity: 0 配合 pointer-events: none，结果点击穿透到主内容区，用户点不到面板里的按钮或输入框。
- 面板容器必须设
z-index大于主内容（比如z-index: 1000），否则被遮挡 - 用
transform: translateX(100%)收起，transform: translateX(0)展开，CSS 过渡更顺滑且不影响布局流 - 给输入框加
autofocus属性没用——面板初始是隐藏的，得在 JS 展开后手动调用inputEl.focus()
如何让侧边面板和笔记正文保持滚动同步
不能靠监听 window.scrollY，因为正文可能是局部滚动容器（比如 div.note-content 有 overflow-y: auto），全局滚动条不动，但内容在动。
正确做法是监听目标容器的 scroll 事件，并把它的 scrollTop 同步到面板内部的聊天消息区域（如果也需滚动跟随）。
- 用
getBoundingClientRect().top计算当前高亮段落相对于视口的位置，再映射到面板内对应评论项的offsetTop，实现“滚动到哪，侧边显示哪条关联评论” - 避免在
scroll回调里直接操作 DOM；用requestAnimationFrame节流，否则 iOS Safari 容易卡顿 - 注意：
scrollIntoView对侧边面板内的元素无效，得手动设置scrollTop
实时聊天消息怎么插入又不卡住 UI
消息量一大，频繁 innerHTML += 或反复 appendChild 就会明显卡顿，尤其在低配安卓机上。
关键不是“怎么加”，而是“怎么批量加+怎么跳过渲染”。新消息来时先存进数组，用 document.createDocumentFragment() 批量生成节点，再一次性挂载。
- 每条消息用
data-timestamp和data-user-id做属性标记，方便后续定位、去重、权限过滤 - 不要在消息 DOM 里直接写时间字符串，用
Intl.DateTimeFormat格式化，否则时区错乱 - 超过 50 条未读时，自动折叠历史消息，只留顶部“加载更多”按钮——避免首次渲染巨量节点
为什么 WebSocket 消息来了，面板里却看不到新消息
大概率是消息插入逻辑没判断面板当前是否打开。WebSocket 回调里直接操作 DOM，但面板收起时容器 display: none 或 transform 移出视口，新消息节点虽然存在，却不参与渲染流程。
- 每次收到消息，先检查
panelEl.classList.contains('open')，再决定是否立即渲染；否则缓存进pendingMessages数组 - 面板展开时，清空缓存并批量追加，同时用
scrollHeight+scrollTop滚到底部 - 别用
setTimeout延迟滚动——得等节点真实渲染完成，用queueMicrotask更可靠
最常被忽略的一点：侧边面板的宽度写死成 320px，但用户缩放页面或切换横竖屏后，它可能挡住关键编辑控件。用 min-width + max-width + calc(100vw - 400px) 动态约束更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
