iPhone端调用$('body').scrollTop()返回0，请问问题出在哪？

这个问题我之前调试iOS Safari页面时也碰到过，核心原因和iOS Safari的滚动机制有关：

问题根源 #

在iPhone的Safari浏览器里，整个页面的滚动容器并不是<body>元素，而是绑定在window对象或者document.documentElement（也就是<html>标签对应的DOM元素）上的。

桌面端浏览器通常允许<body>作为滚动容器，但iOS Safari的渲染引擎把页面滚动的上下文挂载到了文档根节点或window上，所以直接读取document.body.scrollTop或者$('body').scrollTop()自然会返回0——因为<body>本身并没有承担滚动的职责。

解决方案 #

根据你使用的是原生JS还是jQuery，分别有对应的正确写法：

1. 原生JavaScript方案 #

推荐使用标准的window.pageYOffset属性，它在所有现代浏览器（包括iOS Safari）中都能稳定获取页面滚动位置，兼容性最好：

const currentScroll = window.pageYOffset;
console.log('当前滚动位置：', currentScroll);

如果需要兼容更旧的浏览器，可以加上降级方案：

const currentScroll = window.pageYOffset || document.documentElement.scrollTop;

2. jQuery方案 #

直接对window对象调用scrollTop()方法即可，jQuery内部已经处理了不同浏览器的兼容性差异：

const currentScroll = $(window).scrollTop();
console.log('当前滚动位置：', currentScroll);

额外提醒 #

如果是页面内自定义滚动容器（比如某个设置了overflow: scroll的<div>），那还是需要针对该容器元素调用scrollTop()；但如果是整个页面的滚动，一定要以window或document.documentElement为目标。

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