如何防止滚动正文内容但允许在移动设备上滚动导航？

【问题标题】：How to prevent scrolling body content but allow scrolling navigation on mobile?如何防止滚动正文内容但允许在移动设备上滚动导航？
【发布时间】：2018-06-10 21:50:47
【问题描述】：

我正在尝试为我的页面创建“画布外导航”。当导航打开时，我希望正文内容不可滚动，但如果导航菜单超出可见区域，我仍然希望能够在导航菜单中滚动。

我还希望在菜单打开时正文内容保持在同一位置（我找到了一个解决方案，让我在菜单打开时将 position:fixed 添加到正文中，但这会导致页面滚动回顶部）。

$(function() {
  $('.menu-toggle').click(function() {
    $('body').toggleClass('menu-open');
  });
});
body.menu-open {
  overflow:hidden; /* this does not prevent scrolling in mobile safari */
}

.menu-toggle {
  font-size:40px;
  cursor:pointer;
}

nav {
  background:#fff;
  width:100%;
  position:absolute;
  left:-100%;
}
  .menu-open nav {
    left:0;
  }
  nav ul {
    margin:0;
    padding:0;
    list-style-type:none;
  }
  nav ul li {
    padding:20px 0 20px 10px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <header>
    <span class="menu-toggle">=</span>
    <nav>
      <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
        <li>Link 5</li>
        <li>Link 6</li>
        <li>Link 7</li>
        <li>Link 8</li>
        <li>Link 9</li>
        <li>Link 10</li>
      </ul>
    </nav>
  </header>

  <div class="body-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna sollicitudin, tincidunt nisl sed, eleifend diam. Maecenas venenatis semper mauris. In faucibus congue sapien, ultrices efficitur ante pulvinar id. Duis eget egestas sem. Nullam tincidunt purus ut molestie dignissim. Nunc dictum elit arcu. Curabitur vitae magna tortor. Proin lacinia, nisi sit amet gravida pellentesque, orci neque tempor nunc, sit amet lobortis magna nulla id lorem.

Etiam suscipit massa ut diam sollicitudin fringilla ac ac mauris. Vestibulum pretium semper urna. Nulla risus nibh, sollicitudin eget volutpat sit amet, fermentum non enim. Praesent gravida metus in leo pharetra congue. Maecenas augue purus, malesuada tempor venenatis at, maximus at elit. Phasellus ipsum nunc, posuere eu metus in, mattis imperdiet sem. Duis non ultrices mi. Mauris nibh ex, varius vel ipsum vel, fermentum semper tellus. Integer fringilla fringilla pharetra. Vivamus eleifend rhoncus mi at iaculis. Proin suscipit lorem justo. Nulla mauris libero, dapibus a augue et, varius mollis nulla. Etiam iaculis convallis quam. Nulla semper urna vel turpis blandit, in fermentum nunc lobortis. Ut varius dui ac enim fringilla condimentum.

Vivamus in condimentum leo. In ullamcorper lacus quam, elementum dictum elit scelerisque non. Pellentesque commodo augue imperdiet, consequat ipsum ut, ultrices libero. Sed non suscipit nisl. Nam tristique vel ante in condimentum. Morbi et sem pharetra, lacinia eros id, pulvinar enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum ipsum ac scelerisque hendrerit. Ut tellus eros, aliquet sit amet aliquam et, rhoncus a eros.

Donec ut felis ex. Maecenas lobortis risus lacus, vitae vestibulum magna malesuada sit amet. Integer et magna pharetra, egestas lacus non, pretium nisl. Aenean malesuada urna et neque tincidunt tincidunt. In orci ligula, efficitur ut sagittis eget, vestibulum a leo. Phasellus convallis risus et elit sodales, vel sollicitudin arcu elementum. Nulla pretium orci sed aliquet feugiat. Fusce consequat pretium aliquet. Pellentesque dapibus placerat euismod. Aenean eget orci eget enim vestibulum interdum. Donec non enim vel lorem dapibus rhoncus sit amet vel risus. Nulla venenatis egestas mauris, et congue lectus. Etiam ac tristique risus.

Aliquam quis pretium nunc. Sed blandit hendrerit lacus, sit amet posuere velit sodales in. Praesent dapibus viverra turpis. Nam auctor volutpat urna, luctus venenatis nulla venenatis eu. Quisque quis purus vitae lorem blandit elementum a dapibus enim. Donec commodo lectus nec ante pulvinar fermentum. Etiam sodales ex sit amet dolor finibus suscipit. Maecenas luctus placerat congue. Morbi eget viverra lacus. Vivamus ultricies augue at tincidunt luctus. Maecenas vel pretium purus, in egestas nisi.
  </div>
</body>
</html>

【问题讨论】：

  • 在尝试了十几种解决方案之后，我能够解决这个问题的唯一方法是固定位置以及JS的滚动恢复位。如果不是 iOS 溢出隐藏就足够了。很快，我们有望获得不错的触控操作支持（iOS（或我喜欢称之为新的 IE）再次阻止我们）。
  • 你有没有在任何地方设置过身体的高度？例如。 height: 100%?

标签： jquery html css


【解决方案1】：

由于您的内容位于 div 中，因此您可以在菜单打开时将其隐藏

这是一个工作示例

$(function() {
  $('.menu-toggle').click(function() {
    $('body').toggleClass('menu-open');
  });
});
.menu-open .body-content {
  /* Hide content when menu is open */
  height: 0;
  overflow: hidden;
}

.menu-toggle {
  font-size: 40px;
  cursor: pointer;
}

nav {
  background: #fff;
  width: 100%;
  position: absolute;
  left: -100%;
}

.menu-open nav {
  left: 0;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

nav ul li {
  padding: 20px 0 20px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <span class="menu-toggle">=</span>
  <nav>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
      <li>Link 5</li>
      <li>Link 6</li>
      <li>Link 7</li>
      <li>Link 8</li>
      <li>Link 9</li>
      <li>Link 10</li>
    </ul>
  </nav>
</header>

<div class="body-content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna sollicitudin, tincidunt nisl sed, eleifend diam. Maecenas venenatis semper mauris. In faucibus congue sapien, ultrices efficitur ante pulvinar id. Duis eget egestas sem. Nullam tincidunt
  purus ut molestie dignissim. Nunc dictum elit arcu. Curabitur vitae magna tortor. Proin lacinia, nisi sit amet gravida pellentesque, orci neque tempor nunc, sit amet lobortis magna nulla id lorem. Etiam suscipit massa ut diam sollicitudin fringilla
  ac ac mauris. Vestibulum pretium semper urna. Nulla risus nibh, sollicitudin eget volutpat sit amet, fermentum non enim. Praesent gravida metus in leo pharetra congue. Maecenas augue purus, malesuada tempor venenatis at, maximus at elit. Phasellus ipsum
  nunc, posuere eu metus in, mattis imperdiet sem. Duis non ultrices mi. Mauris nibh ex, varius vel ipsum vel, fermentum semper tellus. Integer fringilla fringilla pharetra. Vivamus eleifend rhoncus mi at iaculis. Proin suscipit lorem justo. Nulla mauris
  libero, dapibus a augue et, varius mollis nulla. Etiam iaculis convallis quam. Nulla semper urna vel turpis blandit, in fermentum nunc lobortis. Ut varius dui ac enim fringilla condimentum. Vivamus in condimentum leo. In ullamcorper lacus quam, elementum
  dictum elit scelerisque non. Pellentesque commodo augue imperdiet, consequat ipsum ut, ultrices libero. Sed non suscipit nisl. Nam tristique vel ante in condimentum. Morbi et sem pharetra, lacinia eros id, pulvinar enim. Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Suspendisse elementum ipsum ac scelerisque hendrerit. Ut tellus eros, aliquet sit amet aliquam et, rhoncus a eros. Donec ut felis ex. Maecenas lobortis risus lacus, vitae vestibulum magna malesuada sit amet. Integer et magna
  pharetra, egestas lacus non, pretium nisl. Aenean malesuada urna et neque tincidunt tincidunt. In orci ligula, efficitur ut sagittis eget, vestibulum a leo. Phasellus convallis risus et elit sodales, vel sollicitudin arcu elementum. Nulla pretium orci
  sed aliquet feugiat. Fusce consequat pretium aliquet. Pellentesque dapibus placerat euismod. Aenean eget orci eget enim vestibulum interdum. Donec non enim vel lorem dapibus rhoncus sit amet vel risus. Nulla venenatis egestas mauris, et congue lectus.
  Etiam ac tristique risus. Aliquam quis pretium nunc. Sed blandit hendrerit lacus, sit amet posuere velit sodales in. Praesent dapibus viverra turpis. Nam auctor volutpat urna, luctus venenatis nulla venenatis eu. Quisque quis purus vitae lorem blandit
  elementum a dapibus enim. Donec commodo lectus nec ante pulvinar fermentum. Etiam sodales ex sit amet dolor finibus suscipit. Maecenas luctus placerat congue. Morbi eget viverra lacus. Vivamus ultricies augue at tincidunt luctus. Maecenas vel pretium
  purus, in egestas nisi.
</div>

【讨论】：

  • 感谢您的建议，很遗憾，这不适用于我的实现，因为某些菜单链接会滚动到正文内容中的特定区域。
  • 喜欢单页导航？
【解决方案2】：

当您触发打开按钮时，您可以让 javascript 在正文上禁用滚动并在菜单上启用它。当菜单关闭时，相反的可能会触发，重新启用 body 上的滚动。

在菜单打开时：

$(".body-content").css({ overflow: "hidden" });

在菜单关闭时：

$(".body-content").css({ overflow: "auto" });

【讨论】：

  • 不幸的是，这并不能阻止正文内容在移动设备上滚动
【解决方案3】：

只需将其添加到 css 中

.menu-open header nav {
height: 100vh;
overflow: auto;
}

这将使导航达到 100% 并启用滚动到它。 如果您希望它仅在移动设备中为 100% 高度，只需将其放入 @media 查询中

【讨论】：

    【解决方案4】：

    对于我的网站，以下工作刚刚找到。但是，请务必注意，您不应使用此方法为 body 设置高度 - 例如body.menu-open 没有height: 100%，否则每次打开导航都会跳到顶部。

    body.menu-open{
   overflow: hidden;
}
.menu-open nav{
   overflow: auto;
}

    然后当然记得你的其他风格:)

    【讨论】：

    • 不幸的是，overflow:hidden 上的 body 不会阻止在移动 safari 上滚动
    【解决方案5】：

    我不确定这是否是您想要的，但我将您的导航设置为“固定”在屏幕顶部，并且只是在导航上添加了一些 jQuery，以滚动到页面中的不同部分。 

     $(function () {
            $('.menu-toggle').on('click touch',function () {
                $('body').toggleClass('menu-open');
            });

            $('nav li').on('click touch',function () {
                var id = $(this).attr("id");
                var temp = id.split("_");
                id = temp[1];                                                
                $('html, body').animate({
                    scrollTop: $('#' + id).offset().top
                }, 500);


                $('body').toggleClass('menu-open');
            });
        });
            header {
            position: fixed !important;
            z-index: 10;
            background-color: #FFF;
            display: block;
            width:100%;
            top:0px;
        }


        .body-content{            
            
        }
        
        
        body.menu-open {
            overflow: hidden; /* this does not prevent scrolling in mobile safari */
        }

        .menu-toggle {
            font-size: 40px;
            cursor: pointer;
        }

        nav {
            background: #fff;
            width: 100%;
            position: fixed;
            left: -100%;        
        }

        .menu-open nav {
            left: 0;
            overflow-y:scroll;
        }

        nav ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        nav ul li {
            padding: 20px 0 20px 10px;
        }

        .body-content {
            padding-top:20px;
            position:relative;
        }
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <header>
        <span class="menu-toggle">=</span>
        <nav>
            <ul>
                <li id="to_loc1">Link 1</li>
                <li id="to_loc2">Link 2</li>
                <li id="to_loc3">Link 3</li>
                <li id="to_loc4">Link 4</li>
                <li id="to_loc5">Link 5</li>
                <li>Link 6</li>
                <li>Link 7</li>
                <li>Link 8</li>
                <li>Link 9</li>
                <li>Link 10</li>
            </ul>
        </nav>
    </header>

    <div class="body-content">
        <div id="loc1"><h1>Section 1 </h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna sollicitudin, tincidunt nisl sed, eleifend diam. Maecenas venenatis semper mauris. In faucibus congue sapien, ultrices efficitur ante pulvinar id. Duis eget egestas sem. Nullam tincidunt purus ut molestie dignissim. Nunc dictum elit arcu. Curabitur vitae magna tortor. Proin lacinia, nisi sit amet gravida pellentesque, orci neque tempor nunc, sit amet lobortis magna nulla id lorem.</div>

        <div id="loc2"><h1>Section 2 </h1>Etiam suscipit massa ut diam sollicitudin fringilla ac ac mauris. Vestibulum pretium semper urna. Nulla risus nibh, sollicitudin eget volutpat sit amet, fermentum non enim. Praesent gravida metus in leo pharetra congue. Maecenas augue purus, malesuada tempor venenatis at, maximus at elit. Phasellus ipsum nunc, posuere eu metus in, mattis imperdiet sem. Duis non ultrices mi. Mauris nibh ex, varius vel ipsum vel, fermentum semper tellus. Integer fringilla fringilla pharetra. Vivamus eleifend rhoncus mi at iaculis. Proin suscipit lorem justo. Nulla mauris libero, dapibus a augue et, varius mollis nulla. Etiam iaculis convallis quam. Nulla semper urna vel turpis blandit, in fermentum nunc lobortis. Ut varius dui ac enim fringilla condimentum.</div>

        <div id="loc3"><h1>Section 3 </h1>Vivamus in condimentum leo. In ullamcorper lacus quam, elementum dictum elit scelerisque non. Pellentesque commodo augue imperdiet, consequat ipsum ut, ultrices libero. Sed non suscipit nisl. Nam tristique vel ante in condimentum. Morbi et sem pharetra, lacinia eros id, pulvinar enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum ipsum ac scelerisque hendrerit. Ut tellus eros, aliquet sit amet aliquam et, rhoncus a eros.</div>

        <div id="loc4"><h1>Section 4 </h1>Donec ut felis ex. Maecenas lobortis risus lacus, vitae vestibulum magna malesuada sit amet. Integer et magna pharetra, egestas lacus non, pretium nisl. Aenean malesuada urna et neque tincidunt tincidunt. In orci ligula, efficitur ut sagittis eget, vestibulum a leo. Phasellus convallis risus et elit sodales, vel sollicitudin arcu elementum. Nulla pretium orci sed aliquet feugiat. Fusce consequat pretium aliquet. Pellentesque dapibus placerat euismod. Aenean eget orci eget enim vestibulum interdum. Donec non enim vel lorem dapibus rhoncus sit amet vel risus. Nulla venenatis egestas mauris, et congue lectus. Etiam ac tristique risus.</div>

        <div id="loc5"><h1>Section 5 </h1>Aliquam quis pretium nunc. Sed blandit hendrerit lacus, sit amet posuere velit sodales in. Praesent dapibus viverra turpis. Nam auctor volutpat urna, luctus venenatis nulla venenatis eu. Quisque quis purus vitae lorem blandit elementum a dapibus enim. Donec commodo lectus nec ante pulvinar fermentum. Etiam sodales ex sit amet dolor finibus suscipit. Maecenas luctus placerat congue. Morbi eget viverra lacus. Vivamus ultricies augue at tincidunt luctus. Maecenas vel pretium purus, in egestas nisi.</div>
    </div>
</body>

</html>

    【讨论】：

    • 谢谢，但这似乎不适用于移动设备。当我单击菜单图标时，导航不会出现。
    • 我也注意到了。我将菜单监听器更改为同时监听点击和触摸... .on('click touch')。我暂时无法将文本代码上传到服务器，但我今晚看看能不能看看。
    • 我找出了罪魁祸首。我从标头类中删除了 overflow="hidden"。还添加了 以便布局在移动设备上看起来更大。刚刚在我的服务器上快速测试了它：indowill.com/htmltest.html
    【解决方案6】：

    所以这是经过几次尝试后我能想到的最佳方法。

    导航打开时可以用jQuerytoggle()隐藏body-content，所以当hide和show时，它的位置不会改变。

    确保在body.menu-open 中设置overflow-y: scroll;，以便导航 可以滚动。

    代码如下：

        $(function () {
      $('.menu-toggle').click(function () {
        $('body').toggleClass('menu-open');
        $('.body-content').toggle();
      });
    });
       body.menu-open {
      overflow-y: scroll;
      /* this does not prevent scrolling in mobile safari */
    }

    .menu-toggle {
      font-size: 40px;
      cursor: pointer;
    }

    nav {
      background: #fff;
      width: 100%;
      position: absolute;
      left: -100%;
    }

    .menu-open nav {
      left: 0;
    }

    nav ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    nav ul li {
      padding: 20px 0 20px 10px;
    }
    
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <header>
    <span class="menu-toggle">=</span>
    <nav>
      <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
        <li>Link 5</li>
        <li>Link 6</li>
        <li>Link 7</li>
        <li>Link 8</li>
        <li>Link 9</li>
        <li>Link 10</li>
      </ul>
    </nav>
  </header>

  <div class="body-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna sollicitudin, tincidunt nisl sed, eleifend diam. Maecenas
    venenatis semper mauris. In faucibus congue sapien, ultrices efficitur ante pulvinar id. Duis eget egestas sem. Nullam
    tincidunt purus ut molestie dignissim. Nunc dictum elit arcu. Curabitur vitae magna tortor. Proin lacinia, nisi sit amet
    gravida pellentesque, orci neque tempor nunc, sit amet lobortis magna nulla id lorem. Etiam suscipit massa ut diam sollicitudin
    fringilla ac ac mauris. Vestibulum pretium semper urna. Nulla risus nibh, sollicitudin eget volutpat sit amet, fermentum
    non enim. Praesent gravida metus in leo pharetra congue. Maecenas augue purus, malesuada tempor venenatis at, maximus
    at elit. Phasellus ipsum nunc, posuere eu metus in, mattis imperdiet sem. Duis non ultrices mi. Mauris nibh ex, varius
    vel ipsum vel, fermentum semper tellus. Integer fringilla fringilla pharetra. Vivamus eleifend rhoncus mi at iaculis.
    Proin suscipit lorem justo. Nulla mauris libero, dapibus a augue et, varius mollis nulla. Etiam iaculis convallis quam.
    Nulla semper urna vel turpis blandit, in fermentum nunc lobortis. Ut varius dui ac enim fringilla condimentum. Vivamus
    in condimentum leo. In ullamcorper lacus quam, elementum dictum elit scelerisque non. Pellentesque commodo augue imperdiet,
    consequat ipsum ut, ultrices libero. Sed non suscipit nisl. Nam tristique vel ante in condimentum. Morbi et sem pharetra,
    lacinia eros id, pulvinar enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum ipsum
    ac scelerisque hendrerit. Ut tellus eros, aliquet sit amet aliquam et, rhoncus a eros. Donec ut felis ex. Maecenas lobortis
    risus lacus, vitae vestibulum magna malesuada sit amet. Integer et magna pharetra, egestas lacus non, pretium nisl. Aenean
    malesuada urna et neque tincidunt tincidunt. In orci ligula, efficitur ut sagittis eget, vestibulum a leo. Phasellus
    convallis risus et elit sodales, vel sollicitudin arcu elementum. Nulla pretium orci sed aliquet feugiat. Fusce consequat
    pretium aliquet. Pellentesque dapibus placerat euismod. Aenean eget orci eget enim vestibulum interdum. Donec non enim
    vel lorem dapibus rhoncus sit amet vel risus. Nulla venenatis egestas mauris, et congue lectus. Etiam ac tristique risus.
    Aliquam quis pretium nunc. Sed blandit hendrerit lacus, sit amet posuere velit sodales in. Praesent dapibus viverra turpis.
    Nam auctor volutpat urna, luctus venenatis nulla venenatis eu. Quisque quis purus vitae lorem blandit elementum a dapibus
    enim. Donec commodo lectus nec ante pulvinar fermentum. Etiam sodales ex sit amet dolor finibus suscipit. Maecenas luctus
    placerat congue. Morbi eget viverra lacus. Vivamus ultricies augue at tincidunt luctus. Maecenas vel pretium purus, in
    egestas nisi.
  </div>
</body>

</html>

    【讨论】：

      猜你喜欢
      • 2012-03-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode