javascript - jQuery 的 scrollTop() 在包括 Chrome 在内的 Android 浏览器上表现异常

Question

我在使用动画滚动条时遇到问题。预期的行为应该是单击导航按钮，轻松滚动到页面末尾(并在末尾稍作休息)。

现在PC上的问题完美解决了。在 android 设备上(我试过我的手机)，scrollTop 值和 ($(document.body).height() - $(window).height())不匹配。 scrollTop 恰好减少了 55px，因此表现出各种奇怪的行为......而且有时它会起作用，有时它不会。我认为它与浏览器栏折叠和打乱值(value)有关......但我无法弄清楚。

我尝试了以下方法:在滚动事件上初始化变量，我尝试过不起作用的 Vanilla js。需要帮助:) 供引用http://www.developer.morningmood.org ，如果有帮助，我还会在页面底部打印出这些值。这是代码。

contactF = Math.floor($(document.body).height() - $(window).height());
$("#cont").click(function(){
    if ($(document).scrollTop() < contactF && flagScroll==true){ //flag stops other buttons from beying pushed
        flagScroll = false;
        var inter = setInterval(function(){
            var doc = $(document).scrollTop();
            if (doc == contactF){ // this is the final desired position
                clearInterval(inter);
                flagScroll = true;
                pix = 10; //pixels to jump
                return;
            }
            if (doc >= contactF-50){ // this is a break on aproach
                pix = 1;
            }
            $(document).scrollTop(doc + pix);
        }, 10); 
    }
})

编辑:同样为了找到错误，您需要从页面顶部一直滚动到底部，如果从页面顶部您只需按下联系人按钮即可。但是如果你不滚动它，它会打乱值(value)......

Answer 1

遇到了同样的问题，花了一整天的时间才弄明白。 关于 Android chrome 上的地址栏崩溃搞砸了，你是对的。结果是 jQuery 函数 $(window).height() 总是报告地址栏折叠之前的视口(viewport)高度。要获得正确的值，请改用 window.innerHeight。您可以在此处找到有关调整 URL 栏大小的更多信息 https://developers.google.com/web/updates/2016/12/url-bar-resizing 你也可以找到关于 safari 地址栏自动隐藏的类似问题的人，解决方案是相似的。 Mobile Safari $(window).height() URL bar discrepancy