iOS弹性反弹会影响隐藏/显示导航功能

编程问答 2022-08-15

问题描述

我实现了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

似乎都不起作用，所以想知道是否有人知道

  1. screenY共同对象如何受到iOS反弹的影响
  2. 如果这是解决影响导航资产的退回问题的可行方法
  3. 如果我对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 (将#修改为@）

htmliosiosjavascriptnavnav