无法在固定格内滚动div

我遇到包含父容器的菜单问题，该父容器在整个站点和div上分布实际内容。只要设备屏幕足够大，一切都可以。但特别是对于移动设备，无法显示整个内容。无法在固定格内滚动div

我在http://jsfiddle.net/89xyzsfz/上创建了一个jsfiddle来显示工作示例以及所需的js和css的问题。在移动设备上，只有一些部分可见，但无法滚动内容。

相关的代码本身的解释：

  <div class="hiddenMenu jsMenu"> 
       <div class="menuContainer jsMenuContainer"> 
        <h3>Menu content</h3> 

        <ul> 
         <li><a href="#item1">Item1</a></li> 
         <li><a href="#item2">Item2</a></li> 
         <li><a href="#item3">Item3</a></li> 
         <li><a href="#item4">Item4</a></li> 
         <li><a href="#item5">Item5</a></li> 
         <li><a href="#item6">Item6</a></li> 
         <li><a href="#item7">Item7</a></li> 
         <li><a href="#item8">Item8</a></li> 
         <li><a href="#item9">Item9</a></li> 
        </ul> 
       </div> 

       <div class="menuBackground jsMenuBackground"></div> 
      </div>

hiddenMenu拥有整个菜单。在加载时，整个菜单被隐藏，并通过点击一个CSS类jsMenuButton分配的元素来启用。
menuContainer是内容的容器，当部件在设备上不可见时应该可以滚动。
menuBackground用于设计背景，同时显示除此之外没有特定功能的内容。

来源

2015-05-27 thedom

身体为什么固定？ – ajmajmajma

由于移动设备在打开菜单时能够在后台滚动主体的问题，因此身体被固定。 – thedom

改变你的CSS .hiddenMenu .menuContainer以下几点：

.hiddenMenu .menuContainer { 
    position: relative; 
    margin: 0 auto; 
    text-align: center; 
    z-index: 12; 
    height: 100%; 
    overflow: auto; 
}

的.menuContainer需要滚动菜单项，因此需要overflow:auto;，height:100%，需要相对而不是绝对定位。

http://jsfiddle.net/89xyzsfz/5/

希望帮助！

来源

2015-05-27 13:31:50

太棒了！谢谢！按需要工作:-)。 – thedom

没问题，很高兴我能帮到你！ –

简单将您的代码更改为此CSS。溢出被裁剪，但是添加了一个滚动条查看内容的其余

.hiddenMenu { 
    display: none; 
    height: 100%; 
    left: 0; 
    position: fixed; 
    top : 0; 
    width: 100%; 
    z-index: 10; 
    overflow:scroll; 
}

的溢出值

可见：当它进入了禁区外的内容不会被截断。这是属性的默认值

隐藏：溢出的内容将被隐藏。

滚动：类似于隐藏除了用户将能够通过滚动隐藏的内容

自动：如果方框外的内容收入那么内容将被隐藏，而滚动条应该是用户可以看到其余的内容。

初始：使用缺省值，它是可见

继承：设置溢出到它的父元素的值。

来源

2015-05-27 13:01:17

谢谢！但是我没有看到整个内容，背景也滚动。 – thedom

body.noscroll { position：fixed; }在你的Css中删除此代码 –

实际上保持不变。 – thedom

无法在固定格内滚动div

回答

相关问题