Question

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

起初我以为在导航中添加z-index会修复它，但事实并非如此。

我需要添加什么CSS才能确保当用户滚动导航元素时它会滚动它而不是页面？

这是一个JS小提琴： 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

您可以在点击切换按钮时锁定body元素，以避免在导航栏面板打开之前滚动正文内容。

$('.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/

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

3 个答案: