<p>触底判断应使用 scrollTop + clientHeight >= scrollHeight - 1（容差1px），而非精确相等；自定义滚动条需按比例映射scrollTop到thumb位置，并限制拖动边界，注意box-sizing、移动端touch事件及动态内容更新后的重校验。</p>
用 scrollTop 和 scrollHeight 实现自定义滚动条和触底判断，核心在于准确理解三者关系：滚动容器的可视高度（clientHeight）、总内容高度（scrollHeight）、已向上滚动的距离（scrollTop）。触底本质是判断 scrollTop + clientHeight >= scrollHeight，而自定义滚动条需将该比例映射到拖拽控件位置。
触底判断的正确写法
常见错误是直接用 scrollTop === scrollHeight - clientHeight，但因浮点计算、缩放、边框或子元素 margin 折叠，容易失准。应使用“接近判断”并预留容差：
-
element.scrollTop + element.clientHeight >= element.scrollHeight - 1（容差 1px 更稳妥） - 监听
scroll事件时，建议加防抖（如 50ms），避免高频触发 - 注意：必须确保元素有明确的
overflow: auto/scroll且内容真正可滚动，否则scrollHeight可能等于clientHeight
自定义滚动条的定位与拖动同步
滚动条 thumb 的 top 位置应反映当前滚动进度，其高度通常固定或按比例缩放：
- thumb 高度 =
(clientHeight / scrollHeight) * trackHeight（track 是滚动条轨道高度） - thumb top =
(scrollTop / (scrollHeight - clientHeight)) * (trackHeight - thumbHeight) - 拖动 thumb 时，反向计算
scrollTop：`targetScroll = (dragY - trackTop) / (trackHeight - thumbHeight) * (scrollHeight - clientHeight)` - 务必在拖动中使用
element.scrollTop = Math.max(0, Math.min(scrollMax, targetScroll))做边界限制
兼容性与细节处理
不同浏览器对 scrollHeight 和 clientHeight 的计算略有差异，尤其含 padding、border 或 box-sizing 时：
立即学习“Java免费学习笔记（深入）”；
- 确保滚动容器设置
box-sizing: border-box，避免 padding 影响clientHeight - 移动端需处理 touch 事件（
touchstart/touchmove/touchend），而非仅 mouse 事件 - 动态加载内容后（如无限滚动），需重新校验触底条件，因为
scrollHeight会变化 - 若容器内有 transform 或 will-change，可能影响布局测量，必要时强制重排（如读取 offsetHeight）
一个最小可用示例逻辑
不依赖框架，纯 JS 实现基础触底加载和滚动条映射：
- 获取元素：
const container = document.getElementById('scroll-container'); - 触底监听：
container.addEventListener('scroll', () => { if (container.scrollTop + container.clientHeight >= container.scrollHeight - 2) { loadMore(); } }); - 更新滚动条：
const ratio = container.scrollTop / (container.scrollHeight - container.clientHeight); thumb.style.top = `${ratio * (track.offsetHeight - thumb.offsetHeight)}px`; - 拖动绑定：
thumb.addEventListener('mousedown', startDrag)，内部用getBoundingClientRect()算相对位置
不复杂但容易忽略边界和精度问题，关键是把三个值的关系理清，再套进交互逻辑里。
