滚动加载时 scrollTop 计算不准导致内容跳动，主因是插入新内容后未同步调整滚动位置；应先计算距底部距离，插入后再按新 scrollHeight 重设 scrollTop，并注意美化滚动条或 JS 库可能改变真实滚动容器。
滚动加载时 scrollTop 计算不准导致内容跳动
滚动加载评论区，用户快到底部时触发加载，但新内容插入后页面突然上跳——根本原因是插入 DOM 后未正确维护滚动位置。浏览器默认把新内容加在末尾，scrollHeight 变大，而 scrollTop 没同步调整，视觉上就像“被顶上去”了。
解决思路是：在插入新评论前，先记录当前 scrollTop + clientHeight（即视口底边距顶部距离），插入后再把 scrollTop 设为 新 scrollHeight - 原（scrollHeight - scrollTop），等价于保持底部对齐。
- 用
el.scrollHeight - el.scrollTop - el.clientHeight算出“距底部距离”，插入后设el.scrollTop = el.scrollHeight - 距底部距离 - 避免用
el.scrollTop += 新内容高度，因为新内容可能含图片、异步渲染元素，高度不可预知 - 如果评论带懒加载图片，建议在
img.onload或IntersectionObserver回调里再微调一次scrollTop
CSS 滚动条美化在 WebKit 和非 WebKit 浏览器表现不一致
::-webkit-scrollbar 只在 Chrome/Safari/Edge（Chromium 内核）生效，Firefox 和旧版 Edge 完全忽略；直接写会丢失所有自定义样式。
目前没有跨浏览器统一 API，只能分路径处理：
立即学习“前端免费学习笔记（深入）”；
- WebKit 环境下用
::-webkit-scrollbar+::-webkit-scrollbar-track+::-webkit-scrollbar-thumb三件套控制外观 - Firefox 需启用
scrollbar-width（thin或none）和scrollbar-color（thumb-color track-color），仅支持有限定制 - 不要依赖
overflow: overlay（已废弃），它在新版 Chrome 中无效，且无 Firefox 支持 - 若需强一致性，可考虑 JS 滚动条库如
simplebar，但注意它会替换原生scrollTop行为，和上面的滚动定位逻辑要重新适配
滚动加载 + 美化滚动条后，scrollHeight 偏差影响加载触发时机
滚动条美化本身不改变布局，但某些 CSS（比如 padding、border、transform）或 JS 库（如 simplebar）会把内容包裹进新容器，导致外层元素的 scrollHeight 不再等于评论容器真实高度。
结果就是：你以为离底部还有 100px，实际只剩 20px，加载被延迟甚至失效。
- 始终监听目标容器（如
<div class="comments-list">）的scroll事件，而不是父级 wrapper - 检查该容器是否被第三方滚动条库劫持——例如
simplebar会生成.simplebar-content子容器，真实滚动体变了 - 用
el.scrollHeight - el.scrollTop 判断触底，+50 是容错值，别写死 <code>=== 0 - 在
ResizeObserver里监听容器尺寸变化，防止窗口缩放后阈值失效
移动端 Safari 滚动加载卡顿与 touch-action 冲突
iOS Safari 对滚动链路敏感，如果评论区外层有 touch-action: pan-y 或父容器设置了 overflow: hidden，会导致 scroll 事件延迟触发甚至丢失，加载明显滞后。
- 确保评论容器自身有
overflow-y: auto且父级没加touch-action: none或pan-x - 避免在滚动容器上监听
touchstart并preventDefault，这会阻断原生滚动行为 - 用
passive: true绑定scroll事件（el.addEventListener('scroll', handler, { passive: true })），否则 iOS 会强制降级为非 passive，引发警告并卡顿 - 加载中状态建议用骨架屏而非 loading spinner，减少重排，iOS 对频繁 DOM 插入更敏感
滚动加载和滚动条美化叠在一起时，最麻烦的不是某一个功能实现不了，而是它们互相改写对方依赖的底层属性——scrollTop、scrollHeight、事件触发时机、甚至滚动容器本身。动手前先确认你真正控制的是哪个 DOM 节点，以及它是否已被其他脚本“代理”。
