jQuery的scrollTop（）在包括Chrome在内的Android浏览器上表现奇怪

Question

我在使用动画滚动条时遇到麻烦。 预期的行为应该是单击导航按钮，然后轻松滚动至页面末尾（在末尾稍稍中断一下）。

现在，在PC上的问题可以完美解决。 在android设备上（我试过手机）， scrollTop值和($(document.body).height() - $(window).height())不匹配。 scrollTop恰好少了55px ，因此表现出各种各样的奇怪效果。有时它有时也起作用，但有时却没有。 我认为这与浏览器栏折叠和破坏值有关...但是我无法弄清楚。

我尝试了以下操作：在滚动事件上初始化变量，我尝试了无法正常工作的普通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); 
    }
})

编辑：也要查找错误，您需要从页面顶部一直滚动到底部，如果您只是从页面顶部按接触按钮，它就可以工作。 但是，如果滚动不滚动，它将破坏值...

Answer 1

遇到了同样的问题，花了整整一天的时间来解决。 您对Android chrome上的地址栏崩溃一无所知。 原来jQuery函数$(window).height()总是报告在地址栏折叠之前的视口高度。 要获取正确的值，请改用window.innerHeight 。 您可以在此处找到有关URL栏大小调整的更多信息，网址为https://developers.google.com/web/updates/2016/12/url-bar-resizing。您还可以找到有人问有关野生动物园地址栏自动隐藏的类似问题，解决方案是相似的。 移动Safari $（window）.height（）URL栏差异