如何更准确判断容器是否已完成双向滚动？

不管是用滚动条元素（thumb长度+translateX）对比track长度，还是用常规的scrollWidth/clientWidth/scrollLeft组合，浏览器分辨率缩放时的浮点像素精度问题都是绕不开的——因为逻辑像素和物理像素转换时会产生小数，导致计算值和理论值有0-1px的误差。

针对你用固定±1-2px阈值不确定适配性的问题，推荐几个更通用的方案：

1. 用相对误差替代固定阈值 #

固定阈值的问题在于，滚动轨道（track）的长度差异很大——短轨道下±2px的误差占比可能超过20%，容易误判；长轨道下这个误差占比可以忽略。用误差占轨道长度的比例来判断，能适配不同分辨率和轨道长度：

// 假设是水平滚动，垂直滚动请替换成offsetHeight和transform的Y值
const thumb = document.querySelector('.scrollbar-thumb');
const track = document.querySelector('.scrollbar-track');

const trackLength = track.offsetWidth;
const thumbLength = thumb.offsetWidth;
// 提取transform的X偏移值，兼容无transform的情况
const thumbTranslateX = parseFloat(getComputedStyle(thumb).transform.split(',')[4] || 0);

// 计算误差占比，这里取1%以内的误差都判定为滚动到底
const errorRatio = Math.abs((thumbLength + thumbTranslateX) - trackLength) / trackLength;
const isScrolledToEnd = errorRatio < 0.01;

2. 多判断方式交叉验证 #

同时结合滚动条元素判断和常规DOM属性判断，只要其中一种满足阈值就判定到底，能进一步提升可靠性：

const container = document.querySelector('.scroll-container');
const thumb = document.querySelector('.scrollbar-thumb');
const track = document.querySelector('.scrollbar-track');

// 常规DOM属性判断
const scrollDiff = Math.abs(container.scrollWidth - container.clientWidth - container.scrollLeft);
const isEndByScroll = scrollDiff < 2; // 这里可以保留小固定阈值

// 滚动条元素判断
const trackLength = track.offsetWidth;
const thumbLength = thumb.offsetWidth;
const thumbTranslateX = parseFloat(getComputedStyle(thumb).transform.split(',')[4] || 0);
const thumbDiff = Math.abs((thumbLength + thumbTranslateX) - trackLength);
const isEndByThumb = thumbDiff < 2;

// 两种方式任一满足即判定为滚动到底
const isScrolledToEnd = isEndByScroll || isEndByThumb;

3. 结合scrollend事件（滚动停止后判断） #

如果你的场景不需要实时判断，而是滚动停止后再确认，可以配合浏览器的scrollend事件——这个事件在滚动彻底停止后触发，此时的像素值会更稳定，再结合上述阈值判断即可：

const container = document.querySelector('.scroll-container');
container.addEventListener('scrollend', () => {
  // 这里放入上述任一判断逻辑
  const scrollDiff = Math.abs(container.scrollWidth - container.clientWidth - container.scrollLeft);
  if (scrollDiff < 2) {
    console.log('已滚动到底');
  }
});

总结 #

没有能覆盖100%场景的完美方案，但相对误差判断+多方式交叉验证的组合，能适配绝大多数浏览器缩放和轨道长度的情况，比单一固定阈值的可靠性高很多。

内容的提问来源于stack exchange，提问作者GRhmn