jQuery的scrollTop()在Android浏览器上表现得很奇怪,包括Chrome

时间:2017-05-10 21:40:10

标签: javascript android jquery scroll

我遇到动画滚动条的问题。预期的行为应该是单击导航按钮,轻松滚动到页面的末尾(并在结束时稍微休息一下)。

现在PC上的问题很完美。在Android设备上(我尝试过手机),scrollTop值与($(document.body).height() - $(window).height())不匹配。 55px正好scrollTop因此表现出各种各样的奇怪......有时它有时也不起作用。我认为这与浏览器栏崩溃和贬低价值有关...但我无法弄明白。

我尝试过以下方法:在scroll事件上初始化变量,我尝试过无效的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); 
    }
})
编辑:也是为了找到错误,你需要从页面顶部一直滚动到底部,如果从页面顶部你只需按下它工作的联系按钮。但是如果你滚动它没有,它会扰乱值......

1 个答案:

答案 0 :(得分:0)

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