scrollPage()函数移动设备异常：手机Chrome仅向下滚动无法回滚

问题根源 #

1. 移动端滚动高度计算兼容性问题：手机端Chrome中，document.body.scrollHeight并不总能准确获取页面总高度，部分移动端浏览器会将滚动高度挂载在document.documentElement上，导致你判断底部的条件window.pageYOffset == document.body.scrollHeight - window.innerHeight永远不成立，无法触发方向切换。
2. 严格相等判断的精度误差：移动端浏览器的滚动计算可能存在小数精度偏差，加上每次仅滚动1px的步长，很难让window.pageYOffset刚好等于精确的底部数值，严格相等==的判断会直接失效。
3. setTimeout字符串回调的隐患：用字符串'scrollPage()'作为setTimeout的回调，在部分环境下可能出现作用域解析问题，虽不是直接诱因，但属于代码不稳定因素。

修复后的代码 #

var scrollDirection = 1;
var scrolldelay; // 提前声明变量避免全局污染
function scrollPage() {
  if (isScrollMode) {
    window.scrollBy(0, scrollDirection);
    scrolldelay = setTimeout(scrollPage, 50); // 改用函数引用
    
    // 兼容多浏览器的滚动高度计算
    const scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    const bottomThreshold = scrollHeight - window.innerHeight;
    
    // 用范围判断替代严格相等，留1px容错空间
    if (window.pageYOffset <= 1) {
      scrollDirection = 1;
    } else if (window.pageYOffset >= bottomThreshold - 1) {
      scrollDirection = -1;
    }
  }
}

额外说明 #

• 提前声明scrolldelay变量，避免隐式创建全局变量引发意外问题。
• 用Math.max取body和documentElement的最大滚动高度，适配不同浏览器的布局模型。
• 判断顶部和底部时设置1px的容错范围，规避精度偏差导致的条件失效。
• 将setTimeout的字符串回调改为函数引用，提升代码运行稳定性。

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