应使用position: fixed配合bottom和right定位，但需通过focusin/blur监听、动态切换为absolute定位并计算bottom值，或在iOS 16.4+中用env(keyboard-inset-bottom)降级适配，避免键盘弹出时被顶起。
怎么让客服对话框固定在右下角不遮挡内容
直接用 position: fixed + bottom 和 right 定位最稳妥，但必须避开移动端键盘弹出时被顶起的问题。常见错误是只设 bottom: 20px，结果 iOS Safari 键盘一弹，输入框直接消失。
- 给对话框容器加
position: fixed; bottom: 20px; right: 20px; z-index: 1000; - 不要用
top或left配合calc()模拟右下——容易因视口变化错位 - 如果页面有底部导航栏（比如
position: sticky的 footer），建议把对话框z-index设为大于 footer 的值（如z-index: 1001）
消息气泡怎么区分用户和客服
靠 class 名区分比靠颜色变量更可控，避免后期换主题时漏改 CSS 变量。关键不是“谁发的”，而是“谁的气泡该靠右/靠左+不同背景色”。
- 用户消息用
class="message message--outgoing"，客服用class="message message--incoming" -
message--outgoing加margin-left: auto; text-align: right;实现右对齐气泡 - 别用
float—— 在 flex 布局里它会失效，且 IE11 兼容性差 - 气泡圆角统一用
border-radius: 18px 18px 4px 18px;（右出气泡右上/右下/左下圆角，左出反之）
怎么让新消息自动滚动到底部
监听消息列表 DOM 变化比轮询更轻量，但 MutationObserver 在旧安卓 WebView 里可能不支持，得 fallback 到 scrollTop = scrollHeight。
- 获取消息容器元素：
const chatList = document.querySelector('.chat-messages'); - 每次插入新
<div class="message">后执行：chatList.scrollTop = chatList.scrollHeight; - 如果用了 Vue/React，别在渲染后立刻 scroll —— 确保 DOM 已更新，可用
requestAnimationFrame包一层 - 避免每条消息都触发重排：把所有新消息一次性 append，再 scroll 一次
输入框回车发送 vs 换行怎么处理
默认 textarea 回车是换行，但用户期望回车发送——这个行为冲突必须显式拦截，否则体验断裂。
立即学习“前端免费学习笔记（深入）”；
- 监听
keydown事件，检查e.key === 'Enter'且!e.shiftKey - 满足条件时
e.preventDefault()，然后调用发送函数 - Shift+Enter 才允许换行，这是行业共识，别自定义成 Ctrl+Enter
- 别用
input标签替代textarea—— 无法换行，用户粘贴多行文本会丢内容
fixed 元素在软键盘弹起时会“卡住不动”，不是布局问题，而是 Safari 的 viewport 缩放机制导致的。解决它得配合 viewport meta 的 height=device-height 动态调整，或者改用 position: absolute + 监听 resize 事件重新计算位置。 
