无法滚动可折叠固定导航列表

Question

我已经创建了一个固定的导航条(灵感来自推特引导)。因为我的导航是相当多的链接，我已经决定使导航列表的移动级别固定高度，并滚动溢出-y。在Google上使用响应性工具进行测试时，一切似乎都很好。但是，当我在一个实际的移动设备(iPhone 4)上查看它时，当我试图滚动导航时，它会滚动页面。

一开始我以为在导航中增加一个z索引就能解决这个问题，但事实并非如此。

我需要添加哪些CSS来确保当用户滚动导航元素时，它会滚动它而不是页面？

这里是一个JS Fiddle：https://jsfiddle.net/n1g72opt/

HTML：

<header>
  <div class="nav-show-btn">Toggle</div>
  <nav class="show">
    <ul><li><a href="javascript:;" data-route="">Users</a>
    <ul>

      <li><a href="javascript:;">Link 1</a></li>
      <li><a href="javascript:;">Link 2</a></li>   
      <li><a href="javascript:;">Link 3</a></li>   
      <li><a href="javascript:;">Link 4</a></li>   
      <li><a href="javascript:;">Link 5</a></li>   
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>   
      <li><a href="javascript:;">Link 1</a></li>
      <li><a href="javascript:;">Link 2</a></li>   
      <li><a href="javascript:;">Link 3</a></li>   
      <li><a href="javascript:;">Link 4</a></li>   
      <li><a href="javascript:;">Link 5</a></li>   
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>  
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>   
      <li><a href="javascript:;">Link 1</a></li>
      <li><a href="javascript:;">Link 2</a></li>   
      <li><a href="javascript:;">Link 3</a></li>   
      <li><a href="javascript:;">Link 4</a></li>   
      <li><a href="javascript:;">Link 5</a></li>   
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>  
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>   
      <li><a href="javascript:;">Link 1</a></li>
      <li><a href="javascript:;">Link 2</a></li>   
      <li><a href="javascript:;">Link 3</a></li>   
      <li><a href="javascript:;">Link 4</a></li>   
      <li><a href="javascript:;">Link 5</a></li>   
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>  
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>   
      <li><a href="javascript:;">Link 1</a></li>
      <li><a href="javascript:;">Link 2</a></li>   
      <li><a href="javascript:;">Link 3</a></li>   
      <li><a href="javascript:;">Link 4</a></li>   
      <li><a href="javascript:;">Link 5</a></li>   
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>  
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>   
      <li><a href="javascript:;">Link 1</a></li>
      <li><a href="javascript:;">Link 2</a></li>   
      <li><a href="javascript:;">Link 3</a></li>   
      <li><a href="javascript:;">Link 4</a></li>   
      <li><a href="javascript:;">Link 5</a></li>   
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>  
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>   
      <li><a href="javascript:;">Link 1</a></li>
      <li><a href="javascript:;">Link 2</a></li>   
      <li><a href="javascript:;">Link 3</a></li>   
      <li><a href="javascript:;">Link 4</a></li>   
      <li><a href="javascript:;">Link 5</a></li>   
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>  
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>   
      <li><a href="javascript:;">Link 1</a></li>
      <li><a href="javascript:;">Link 2</a></li>   
      <li><a href="javascript:;">Link 3</a></li>   
      <li><a href="javascript:;">Link 4</a></li>   
      <li><a href="javascript:;">Link 5</a></li>   
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>  


    </ul>
</li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum et orci in sagittis. Maecenas laoreet libero id enim congue ornare. Integer ac venenatis leo, et placerat libero. Nunc eu porta justo. Praesent imperdiet turpis ut congue suscipit. Fusce molestie vulputate est. Nam at facilisis nunc. Vivamus tempus eu lacus et

CSS：

header {
    background: #3b3f44;
    color: #f5f5f5;
    position: fixed;
    width: 100%;
    z-index: 9999;
    top: 0;
}
.nav-show-btn {
    display: inline-block;
    float: right;
    font-size: 12px;
    padding: 10px;
    cursor: pointer;
}

header nav.show {
    display: block !important;
    max-height: calc(100vh - 80px);
    overflow-y: scroll;
    width: 100%;
    position:relative;
    z-index: 9999;
}

Answer 1

您需要使用-webkit-overflow-scrolling:touch;，在我的例子中，我也需要添加height。

只在您在手机上加载页面时设置它，使用媒体查询；

@media (min-width:320px)  {
/* smartphones, iPhone, portrait 480x320 phones */ 
    header nav.show {
            display: block !important;
            max-height: calc(100vh - 80px);
            height: 200px;
            overflow-y: scroll;
            width: 100%;
            -webkit-overflow-scrolling:touch; // mobile safari
        }
}

Answer 2

尝试将ul元素设置为

溢出:滚动也许可以解决这个问题！

Answer 3

您可以在单击Toggle按钮时锁定body元素，以避免主体内容滚动，直到navBar面板打开。

$('.nav-show-btn').on('click', function() {
    $('body').toggleClass('menuOpen');      // Lock Body layer
    $('header > nav').toggleClass('show') // open navbar
});

jsFiddle：https://jsfiddle.net/ShirishDhotre/zt8LhoL8/1/