页面滚动时onscroll事件触发异常及模态窗关闭问题排查

问题根源拆解 #

1. 关闭模态窗后滚动事件不触发的原因 #

当打开模态窗设置body { overflow: hidden }时，浏览器会隐藏页面滚动条，此时document.documentElement.clientHeight会增加（滚动条占用的宽度被释放）；关闭模态窗恢复overflow: auto后，滚动条重新出现，clientHeight又随之减小。加上浏览器对滚动位置计算的浮点数精度问题（比如滚动到最底部时scrollY可能出现xxx.8这样的小数），就会导致window.scrollY + document.documentElement.clientHeight略小于页面总高度scrollHeight，无法满足原本的触发条件，事件自然不再触发。

2. 向上取整后关闭模态窗时事件异常触发的原因 #

向上取整后，关闭模态窗的瞬间，滚动条重新出现导致clientHeight骤减，此时scrollY + 取整后的clientHeight会瞬间大于等于scrollHeight，触发滚动事件。另外，空模态窗会导致浏览器未正确触发重排：没有内容的模态窗在显示/隐藏时，浏览器可能跳过部分布局更新流程，导致滚动事件监听的状态没有及时同步；而添加任意字符后，模态窗有了可计算的布局内容，浏览器会正常执行重排，事件状态同步正常，异常触发的问题就消失了。定时器无效是因为问题本质是布局变化引发的事件触发，而非时序延迟问题，所以定时器无法干预。

针对性解决方案 #

1. 优化滚动到底部的判断逻辑 #

放弃精确等于的判断，改用“接近底部”的逻辑，同时兼容浮点数和滚动条宽度的影响：

const isReachBottom = () => {
  const scrollTop = window.scrollY;
  const viewportHeight = document.documentElement.clientHeight;
  const totalHeight = document.documentElement.scrollHeight;
  // 允许1px的误差，兼容滚动条和浮点数问题
  return Math.ceil(scrollTop + viewportHeight) >= totalHeight - 1;
};

2. 模态窗切换时控制滚动事件监听 #

从根源上避免模态窗显示期间触发滚动事件：打开模态窗时移除滚动监听，关闭时重新绑定：

// 滚动事件处理函数
function handleScroll() {
  if (isReachBottom()) {
    // 你的滚动到底部逻辑，比如打开模态窗
    openModal();
  }
}

// 打开模态窗
function openModal() {
  document.body.style.overflow = 'hidden';
  window.removeEventListener('scroll', handleScroll);
  // 其他模态窗显示逻辑
}

// 关闭模态窗
function closeModal() {
  document.body.style.overflow = '';
  window.addEventListener('scroll', handleScroll);
  // 其他模态窗隐藏逻辑
}

3. 修复空模态窗的重排问题 #

如果模态窗需要保持空状态，给它添加最小高度占位，强制浏览器触发重排：

<!-- 模态窗容器 -->
<div class="modal">
  <!-- 占位元素，确保浏览器识别布局 -->
  <div style="min-height: 1px; visibility: hidden;"></div>
</div>

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