Question

以下代码无法滚动，因为overflow: auto不允许溢出到顶部。是否还有一种方法允许在此处滚动使用纯css ，没有额外的容器div？

.container {
    display: flex;
    flex-wrap: wrap-reverse;
    overflow-y: auto;
    height: 150px;
    width: 150px;
    background-color: rgba(0,0,0,0.5);
}

.container div {
    min-width: 100px;
    min-height: 100px;
    margin: 10px;
    background-color: rgba(0,0,0,0.5);
}

<div class="container">
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
</div>

修改这似乎是浏览器的错误。

Firefox错误：https://bugzilla.mozilla.org/show_bug.cgi?id=1042151

Edge UserVoice：https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/10461201-support-reverse-scrolling-when-justify-content-fl

Answer 1

flex-wrap: wrap-reverse（多行）似乎存在问题，其中根本不允许滚动。

对于您的特定用例（固定宽度与之间的一个项目），您可以将flex-direction与column-reverse一起使用，并获得与您想要的相同的结果。

<强>段：

.container {
    display: flex; flex-direction: column-reverse;
    height: 150px; width: 150px;
    overflow: auto; background-color: rgba(0,0,0,0.5);
}
.container div {
    min-width: 100px; min-height: 100px; margin: 10px;
    background-color: rgba(0,0,0,0.5); color: #fff;
}
.container div:nth-child(odd) { background-color: #33a; }

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

如何在顶部进行溢出以使反向滚动工作？

1 个答案: