滾動的jQuery

Question

創建

所以我有一個列表UL一個HTML箱：

<div id="profile_photo_conteiner"> 
       <ul> 

    </ul> 
</div> 

在此列表中

我添加一些圖片使用jQuery：

... 
    var i =1; 
    var num = 10; 
    while (i <= num) 
     { 
         $("#profile_photo_conteiner ul").append("\ 
         <li>\ 
          <img src=\"\"/>\ 
          <div class=\"gallery_image_title\">\ 
           <h5 class=\"gallery_title\">Click me</h5>\ 
          </div>\ 
      </li>\ 
        "); 

一切都顯示，但我沒有通過x軸滾動。我嘗試了很多變化，並且發現如果我刪除了ul和li並添加了滾動顯示的圖片，但只要嘗試使用ul，它就不會顯示出來。 jsfiddle - code - 這是我的一些測試代碼。那麼是否有一個列表ul的選項來滾動它們？ CSS的 部分：

#profile_photo_conteiner { 
height: 210px; 
padding-top: 10px; 
overflow-y: hidden; 
    overflow-x: auto; 
width: 200x; 
white-space:nowrap; 
margin-bottom: 55px; 
border: solid 1px red; 

} 

/*-galery*//* 
#profile_photo_conteiner ul { 
    overflow-x:scroll; 
    overflow-y:hidden; 

}*/ 


#profile_photo_conteiner ul li{ 
    float: left; 
    margin-right: 10px; 
    margin-left: 10px; 
    padding: 10px; 
    list-style-type: none; 
    position:relative; 
    cursor: pointer; 


} 

#profile_photo_conteiner ul li img { 
    display: block; 
    width: 150px; 
    height: 150px; 
} 

所以我刪除了jQuery代碼，因爲這個問題是不是在它 行，所以這裏是content - 它是相同的代碼，但隨着高度超過1000像素，表明我們有足夠的內容， content -2 - agin相同的代碼，但有一個正常的高度，所以我們有anogh內容oveflow-y是隱藏的，你看不到結果的其餘部分，overflow-x不顯示（如果我把溢出 - x滾動）滾動將顯示，但它不會工作，因爲內容不會通過x軸。

Answer 1

從你的代碼，看來你是通過CSS隱藏垂直滾動條：

overflow-y: hidden;

這應該是

overflow-y: auto;

然後，您可以通過做隱藏水平滾動overflow-x

已更新fiddle

Answer 2

由於內容尚未溢出，因此您無法看到水平滾動（x軸），就像您的意思/想要的那樣。 您可以嘗試通過設置容器的最大寬度小於內容來觸發此操作。

max-width: certain-px-smaller-than-content; 

櫃面你想要顯示的垂直滾動，你可以設置

overflow-y: auto; 
overflow-x: hidden;