移动端页面滚动位置获取异常：各API均返回0或极低值

问题现象 #

执行以下代码时，所有滚动位置API在安卓移动端浏览器（Chrome、三星浏览器、Firefox、DuckDuckGo）中始终返回0，直到滚动到页面底部才返回极小值（50-100px），但实际滚动距离已达500-1000px；该问题在Windows PC浏览器中不存在。

代码如下：

$(document).ready(function()
{
    $(window).on('scroll touchstart', function() {
        console.log(
            "$('body').scrollTop="+$('body').scrollTop()
            +", $('html').scrollTop="+$('html').scrollTop()
            +", window.scrollTop= "+$(window).scrollTop()
            +", document.documentElement.scrollTop= "+document.documentElement.scrollTop
            +", window.pageYOffset= "+window.pageYOffset
            +", window.scrollY= "+window.scrollY
            +", document.body.scrollTop= "+document.body.scrollTop
            +", document.scrollingElement.scrollTop="+document.scrollingElement.scrollTop
        );
    });
});

已尝试移除html/body的height:100%样式并添加body { height: auto !important; }，问题仍存在。

核心原因 #

安卓移动端浏览器中，实际滚动容器并非全局视口（window/html/body），而是页面内某个被设置了overflow: scroll/overflow-y: auto且高度固定的元素。此时全局滚动API自然无法捕获到正确的滚动位置，只有当滚动到内部容器底部触发页面视口的滚动时，才会返回极小值。

此外，也可能存在以下次要原因：

• 页面使用了第三方滚动库（如iScroll、BetterScroll），这类库会接管原生滚动，导致原生API失效
• html/body被设置了overflow: hidden，阻止了全局视口滚动
• 移动端触摸滚动行为被CSS属性（如touch-action）限制

替代方案与解决步骤 #

1. 定位实际滚动容器 #

检查页面DOM结构，找到设置了overflow: scroll/overflow-y: auto且高度固定的元素，通常这类元素会有明确的高度限制（如height: 100vh、max-height: 500px等）。

2. 监听目标容器的滚动事件并获取scrollTop #

如果找到目标容器，修改代码监听该容器的scroll事件，获取其scrollTop值：

// 假设滚动容器的选择器是#content-container
$(document).ready(function()
{
    $('#content-container').on('scroll touchstart', function() {
        console.log("容器scrollTop=" + $(this).scrollTop());
    });
});

3. 统一使用标准滚动元素API #

如果确认是全局视口滚动问题，优先使用document.scrollingElement.scrollTop（该API会自动识别当前浏览器的滚动根元素），同时修正代码中可能的写法问题：

$(document).ready(function()
{
    $(window).on('scroll touchstart', function() {
        console.log(
            "标准滚动元素scrollTop=" + document.scrollingElement.scrollTop
        );
    });
});

4. 排查并修正CSS问题 #

• 确保html和body未设置overflow: hidden，添加以下CSS重置：

html, body {
    overflow: auto;
    height: auto;
    margin: 0;
    padding: 0;
}

• 若存在触摸滚动异常，添加touch-action: pan-y确保垂直滚动正常：

html, body {
    touch-action: pan-y;
}

5. 第三方滚动库适配 #

如果页面使用了第三方滚动库，需使用库提供的API获取滚动位置：

• 例如iScroll：myScroll.y（注意iScroll的滚动值为负数）
• 例如BetterScroll：bs.scroll.y

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