如何解决iOS弹性反弹会影响隐藏/显示导航功能
我实现了simple function,以在向下滚动时隐藏底部导航栏,并在向上滚动时再次显示导航栏。
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.bottom = "0";
} else {
document.getElementById("navbar").style.bottom = "-100px";
}
prevScrollpos = currentScrollPos;
};
但是在iOS上,滚动至屏幕顶部会触发iOS弹性反弹,并且当窗口弹回时会再次隐藏导航栏,因为在这种情况下,(prevScrollpos > currentScrollPos)
= FALSE,触发了{{1} }。
我尝试使用各种方法(例如iNoBounce或其他建议,例如将HTML和body标签分别设置为else
和overflow: hidden
来禁用跳动。但是所有这些都禁用了隐藏导航功能。
现在,我正在尝试向if语句添加两个条件,以使隐藏导航栏的功能在例如auto
共同坐标小于10px之前不会触发–以解决跳动问题。我已经尝试了以下各种方法:screenY
似乎都不起作用,所以想知道是否有人知道
- screenY共同对象如何受到iOS反弹的影响
- 如果这是解决影响导航资产的退回问题的可行方法
- 如果我对
if ((prevScrollpos > currentScrollPos) || (dontHide < 10))
的{{1}}声明正确无误
下面的代码。如果有人以前曾遇到过这个问题或有任何想法,我将非常感谢您的帮助。
if
||
var dontHide = window.screenY;
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if ((prevScrollpos > currentScrollPos) || (dontHide < 10)) {
document.getElementById("navbar").style.bottom = "0";
} else {
document.getElementById("navbar").style.bottom = "-100px";
}
prevScrollpos = currentScrollPos;
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。