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

Question

我创建了一个固定的导航栏(灵感来自 Twitter Bootstrap)。因为我的 navh 中有很多链接，所以我决定将导航列表的移动级别设置为固定高度并滚动 overflow-y。使用响应式工具在 Google Chrome 中进行测试时，一切似乎都很好。但是，当我在实际的移动设备(iPhone 4)上实时检查它时，当我尝试滚动导航时，它会滚动页面。

起初我以为在导航中添加一个 z-index 可以解决这个问题，但事实并非如此。

我需要添加什么 CSS 以确保当用户滚动 nav 元素时它滚动它而不是页面？

这是一个 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 query之类的;

@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
        }
}