iOS浏览器滚动位置获取异常：值始终为0的问题求助

这个问题我之前帮好几个开发者解决过，iOS Safari的滚动机制确实有点“特立独行”😅，你遇到的情况正是它的**弹性滚动（橡皮筋滚动）**特性导致的——在正常滚动页面内容的过程中，浏览器不会实时把滚动位置同步给JS，只有当滚动停止，或者你把页面拉到超出内容边界（也就是橡皮筋弹动的阶段）时，scrollTop/scrollY这些值才会更新，所以你才会看到滚动位置始终是0的奇怪现象。

下面给你两个靠谱的解决方案，按需选择：

方案一：用Intersection Observer代替监听滚动位置（推荐） #

这种方式不需要依赖滚动位置的数值，而是通过监听页面顶部元素的可见性来判断是否需要显示导航按钮，完全避开iOS的滚动同步问题，性能也更优。

步骤很简单：

• 先在页面顶部加一个极小的占位元素
• 用Intersection Observer监听它是否在视口中
• 根据可见性切换导航按钮的显示状态

示例代码：

// 创建顶部标记元素（不会影响页面布局）
const topMarker = document.createElement('div');
topMarker.style.cssText = 'height:1px; position:absolute; top:0; left:0; pointer-events:none;';
document.body.appendChild(topMarker);

// 配置观察者：当元素完全离开视口时触发回调
const observer = new IntersectionObserver((entries) => {
  const [entry] = entries;
  // 显示/隐藏回到顶部按钮
  const backToTopBtn = document.getElementById('back-to-top');
  backToTopBtn.style.display = entry.isIntersecting ? 'none' : 'block';
}, { threshold: 1.0 });

// 开始监听顶部标记
observer.observe(topMarker);

方案二：用requestAnimationFrame实时获取滚动位置 #

如果你的逻辑必须依赖具体的滚动数值，可以用requestAnimationFrame来获取更准确的位置，它能在浏览器每一次渲染帧中执行，比传统的scroll事件监听更靠谱，能避开iOS滚动时的JS延迟问题。

同时要注意，iOS上window.pageYOffset是最可靠的滚动位置获取方式，建议封装一个兼容函数：

// 兼容多浏览器的滚动位置获取函数
function getCurrentScrollY() {
  return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
}

let lastScrollY = 0;

// 实时更新滚动状态
function updateNavButtons() {
  const currentScrollY = getCurrentScrollY();
  // 只有当滚动位置变化时才执行逻辑
  if (currentScrollY !== lastScrollY) {
    const backToTopBtn = document.getElementById('back-to-top');
    const downToBottomBtn = document.getElementById('down-to-bottom');
    
    // 比如：滚动超过100px显示回到顶部按钮
    backToTopBtn.style.display = currentScrollY > 100 ? 'block' : 'none';
    // 滚动到接近底部显示向下按钮（根据你的需求调整）
    const isNearBottom = currentScrollY + window.innerHeight >= document.body.offsetHeight - 50;
    downToBottomBtn.style.display = isNearBottom ? 'block' : 'none';
    
    lastScrollY = currentScrollY;
  }
  // 持续监听下一帧
  requestAnimationFrame(updateNavButtons);
}

// 启动监听
updateNavButtons();

另外还要提醒你几个注意点：

• 不要给body或html设置touch-action: none，这会破坏iOS的原生滚动机制
• 如果页面有自定义滚动容器（比如设置了overflow: scroll的元素），要监听该容器的滚动事件，而不是window的
• 避免在scroll事件回调里做大量DOM操作，会导致页面卡顿，iOS上这个问题更明显

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