無法在固定格內滾動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

回答

相關問題