window.pageYOffset 在 iPad 上获取错误值-PHP中文网问答

我有一个标题浮动框，当您向下滚动页面时，该浮动框就会消失。工作正常，只是在我的 iPad 上不行。

当我向上滚动页面时，导航菜单会按预期显示，但一旦我放开页面，它就会再次消失。当页面到达底部时它也会出现

<!doctype html>
<html>
<head>
<title>Our Funky HTML Page</title>
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
<style>
    .main-header {
        width: 100%;
        position: fixed;
        top: 0;
        background-color: #ffff00;
        padding: 0.5rem 2.0rem 0.5rem 1.9rem;
        height: 7.0rem;
        z-index: 50;
        display: flex;
        margin: auto;
        align-items: center;
        justify-content: space-between;
        transition: top 0.4s; /* Transition effect when sliding down (and up) */
        }

        .content {
            width: 100%;
            background-color: #ff0000;
            height: 2000px;
        }
</style>
<script>

    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
      var currentScrollPos = window.pageYOffset;
      //  if ( ( (prevScrollpos > currentScrollPos)  ||  ( currentScrollPos < 50 )  ) ){
      if ( ( (prevScrollpos >= currentScrollPos)    ) ){
        document.getElementById("main-header").style.top = "0rem";
      } else {
        document.getElementById("main-header").style.top = "-8rem"; // "-70px";
      }
      prevScrollpos = currentScrollPos;
    }


</script>
</head>
<body>
    <div class="main-header" id="main-header"></div>
    <div class="content" ></div>
</body>
</html>

该网站是用 vuejs 完成的

相关部分：

<!doctype html>
<html>
<head>
<title>Our Funky HTML Page</title>
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
<style>
    .main-header {
        width: 100%;
        position: fixed;
        top: 0;
        background-color: #ffff00;
        padding: 0.5rem 2.0rem 0.5rem 1.9rem;
        height: 7.0rem;
        z-index: 50;
        display: flex;
        margin: auto;
        align-items: center;
        justify-content: space-between;
        transition: top 0.4s; /* Transition effect when sliding down (and up) */
        }

        .content {
            width: 100%;
            background-color: #ff0000;
            height: 2000px;
        }
</style>
<script>

    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
      var currentScrollPos = window.pageYOffset;
      //  if ( ( (prevScrollpos > currentScrollPos)  ||  ( currentScrollPos < 50 )  ) ){
      if ( ( (prevScrollpos >= currentScrollPos)    ) ){
        document.getElementById("main-header").style.top = "0rem";
      } else {
        document.getElementById("main-header").style.top = "-8rem"; 
     
      }
      prevScrollpos = currentScrollPos;
    }
    
    
</script>
</head>
<body>
    <div class="main-header" id="main-header">

    </div>

    <div class="content" >

    </div>
</body>
</html>

const maxScrollHeight = document.body.scrollHeight - window.innerHeight; if (prevScrollpos >= currentScrollPos && currentScrollPos 0) { // Prevent hiding header on top overscroll document.getElementById("main-header").style.top = "-8rem"; }