Question

我已经建立了一个响应式网站，当我打开导航时，如果尝试滚动，则主体会继续滚动。显然，打开导航栏时，身体会被阻止滚动。

我使用jQuery，并且在打开导航栏时添加了overflow: hidden，在关闭导航栏时添加了overflow: auto。 它可以在Chrome，Firefox和Android（三星浏览器等）上完美运行，但不能在iOS（iPad，iPhone）上运行。

我也尝试使用Javascript scrollTo，但iOS也不支持。

我也尝试过玩position: fixed，但是打开导航栏时，我的身体跳到了页面顶部。

注意：您必须将代码段切换为“整页”，然后将浏览器的大小调整为（最小宽度：768px）和（最大宽度：992px），才能测试打开导航按钮。

如何解决此问题？

谢谢。

$(document).ready(function() {
      $(".open-nav").click(function() {
        $(".main-nav").fadeToggle(500);
        $("body").css("overflow-y", "hidden");
        $(".open-nav").css("display", "none");
        $(".close-nav").css("display", "block");
      });
      
      $(".close-nav").click(function() {
        $(".main-nav").fadeToggle(500);
        $("body").css("overflow-y", "visible");
        $(".close-nav").css("display", "none");
        $(".open-nav").css("display", "block");
      });
    });

html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      position: relative;
    }

    header {
      width: 100%;
      height: 90px;
      position: fixed;
      top: 0;
      left: 0;
      background-color: grey;
      z-index: 9999;
    }

    .open-nav {
      width: 60px;
      height: 40px;
      background-color: red;
      display: none;
      text-align: center;
    }

    .close-nav {
      width: 60px;
      height: 40px;
      background-color: green;
      display: none;
      text-align: center;
    }

    .main-nav {
      float: right;
      height: 50px;
      margin-top: 20px;
    }

    .main-nav ul {
      list-style-type: none;
    }

    .main-nav ul li {
      float: left;
      padding: 0 15px;
    }

    .main-nav ul li a {
      font-family: "Open Sans", Arial, Helvetica, sans-serif;
      display: block;
      margin: 0;
      line-height: 50px;
      font-size: 16px;
      color: #000;
      text-decoration: none;
    }

    .main-nav ul li a:hover {
      border-bottom: solid #ff0054 2px;
    }

    .active {
      border-bottom: solid #ff0054 2px;
    }
    
    #hero {
    width: 100%;
    height: 100%;
    background-color: blue;
    }

    #hero h1 {
    margin-top: 90px;
    padding: 0;
    color: #fff;
    }

    #hero p {
    margin-top: 20px;
    padding: 0;
    color: #fff;
    }


    /* Medium devices (tablets, 768px and 992px)*/

    @media (min-width: 768px) and (max-width: 992px) {
      a.open-nav {
        display: block;
        margin-top: 20px;
      }
      a.close-nav {
        display: none;
        margin-top: 20px;
        z-index: 1;
      }
      .main-nav {
        display: none;
        width: 100vw;
        height: 100vh;
        background-color: #fff;
        float: none;
        z-index: 0;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        padding: 0;
      }
      .main-nav ul {
        width: 100%;
        padding: 0;
        padding-top: 25%;
      }
      .main-nav ul li {
        float: none;
        text-align: center;
        padding: 0;
      }
      .main-nav ul li a {
        display: inline-block;
        font-size: 26px;
        margin: 0 30px 60px 30px;
      }
    }

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
      <header>
        <div class="container">
          <a class="open-nav col-xs-3 hidden-md" title="Menu">Click to Open</a>
          <a class="close-nav col-xs-3 hidden-md" title="Menu">Click to Close</a>
          <nav class="main-nav">
            <ul>
              <li><a href="index.html" class="active" title="Home">Home</a></li>
              <li><a href="#" title="Link 1">Link 1</a></li>
              <li><a href="#" title="Link 2">Link 2</a></li>
            </ul>
          </nav>
        </div>
      </header>
      <section id="hero">
        <div class="container">
          <div class="row">
            <div class="col-md-6 col-md-offset-0 col-xs-10 col-xs-offset-1">
              <h1>Title</h1>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
          </div>
        </div>
       </section>
       <section id="text">
        <div class="container">
          <div class="row">
            <div class="col-md-12 col-md-offset-0 col-xs-10 col-xs-offset-1">
              <h3>Title 2</h3>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
          </div>
         </div>
      </section>
  </body>
</html>

仅在iOS中打开导航时身体滚动

0 个答案: