Li絕對定位在ipad上溢出的ul滾動

我有一個ul（第一個）li位置絕對。 ul有一個溢出y，當我向下滾動第一個li時，停留在那裏，因爲它的位置是絕對的。Li絕對定位在ipad上溢出的ul滾動

<div> 
<ul style="overflow-y:scroll; max-height:80px;"> 
    <li>CAt 1</li> 
    <li><img src="../adsf.jpg">Content1</li></li> 
    <li><img src="../adsf.jpg">Content2</li></li> 
    <li><img src="../adsf.jpg">Content3</li></li> 
    <li><img src="../adsf.jpg">Content4</li></li> 
    <li><img src="../adsf.jpg">Content5</li></li> 
</ul>  
</div>

但是，當我在iPad上測試這個，所有元素向下滾動，包括第一個。這是一個fiddle描述情況在此先感謝

來源

2015-04-23 bermick

嘗試使位置相對於包含div的ul不是ul。這意味着採取的位置是：相對過UL和把它放在股利

CSS

#listContianer { 
    position: relative; 
} 

#listContianer ul {/* no positioning here */} 

#listContainer .fixedList { 
    position: absolute; 
    top: 2em; 
    left: 1em; 
}

HTML

<div id="listContainer"> 
<ul style="overflow-y:scroll; max-height:80px;"> 
    <li class="fixedList">CAt 1</li> 
    <li><img src="../adsf.jpg">Content1</li></li> 
    <li><img src="../adsf.jpg">Content2</li></li> 
    <li><img src="../adsf.jpg">Content3</li></li> 
    <li><img src="../adsf.jpg">Content4</li></li> 
    <li><img src="../adsf.jpg">Content5</li></li> 
</ul>  
</div>

你將不得不重新調整頂部和左側值，以適應你的造型。但要確保你刪除的任何位置上的UL

還是儘量讓頂部的列表項直接坐在另一DIV元素

<div id="listContainer"> 
    <span class="fixedList">CAt 1</span> 
    <ul style="overflow-y:scroll; max-height:80px;"> 
     <li><img src="../adsf.jpg">Content1</li></li> 
     <li><img src="../adsf.jpg">Content2</li></li> 
     <li><img src="../adsf.jpg">Content3</li></li> 
     <li><img src="../adsf.jpg">Content4</li></li> 
     <li><img src="../adsf.jpg">Content5</li></li> 
    </ul>  
</div>

你不得不給UL一些頂級的填充使即新的第一個項目不覆蓋

#listContianer ul { 
    top-padding: 2em; 
}

來源

2015-04-23 22:51:21 wunth

所以喲意味着唯一的變化將增加位置：相對於UL父div？我想要的是，UL的第一個孩子留下來，其他人滾動。這在個人電腦mac上的鍍鉻是可以的，但它的工作原理並不像ipad – bermick

不完全。因爲你的第一個li保持放在平板電腦上，所以我認爲你有位置：在你的樣式表或某個地方ul上的相對位置。這將需要被刪除，因爲div應該是最近定位的祖先。假設它的工作原理是 – wunth

我知道！,,,那是什麼理論說的和它的正確，甚至我在Chrome的Device Emulator中測試它爲iPad，它顯示正確;但在一個真正的iPad（與鉻和Safari瀏覽器）它只是不工作，它滾動整個列表 – bermick

Li絕對定位在ipad上溢出的ul滾動

回答

相關問題