Question

我有一个绝对的（第一）李位置的ul。 ul有一个溢出-y，当我向下滚动第一个li时，它保持在那里，因为它的位置是绝对的。

<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来描述这种情况提前致谢

Answer 1

尝试相对于ul的包含div的位置而不是ul。这意味着采取立场：相对于ul并将其放在div上

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;
}

李绝对定位在ipad上溢出的ul滚动

1 个答案: