我在使用动画滚动条时遇到麻烦。预期的行为应该是单击导航按钮,然后轻松滚动至页面末尾(在末尾稍稍中断一下)。
现在,在PC上的问题可以完美解决。在android设备上(我尝试过手机),scrollTop
值和($(document.body).height() - $(window).height())
不匹配。 55px
与scrollTop
完全不一样,因此表现出各种各样的怪异...有时它有时起作用,有时却不起作用。我认为这与浏览器栏折叠和破坏值有关...但是我无法弄清楚。
我尝试了以下操作:在滚动事件上初始化变量,我尝试了无法正常工作的普通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);
}
})
编辑:也要查找错误,您需要从页面顶部一直滚动到底部,如果您只是从页面顶部按接触按钮,它就会起作用。但是,如果滚动不滚动,它将破坏值...
最佳答案
遇到了同样的问题,花了整整一天的时间来解决。
您对Android chrome上的地址栏崩溃一无所知。事实证明,jQuery函数$(window).height()
始终报告地址栏折叠之前的视口高度。要获取正确的值,请改用window.innerHeight
。您可以在https://developers.google.com/web/updates/2016/12/url-bar-resizing此处找到有关URL栏大小调整的更多信息。
您还会发现有人问有关野生动物园地址栏自动隐藏的类似问题,解决方案是相似的。 Mobile Safari $(window).height() URL bar discrepancy