如何创建一个垂直可滚动区域,其中的项目在容器外部可见?
我创建了一个 MRE 来帮助您。例如,如何使内部绿色框在主容器外部可见?
.outer {
height: 200px;
width: 100px;
overflow-y: scroll;
overflow-x: visible;
}
.item {
position: relative;
height: 30px;
width: 30px;
border: 2px solid red;
}
.inner {
position: absolute;
top: 5px;
left: 5px;
border: 2px solid green;
width: 200px;
height: 15px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class=outer>
<div class=item></div>
<div class=item></div>
<div class=item>
<div class=inner></div>
</div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
<div class=item></div>
</div>
</body>
</html>
存在一个现有问题,但它没有回答我的问题,因为它使用了覆盖层。
所以关键就在这里:
overflow-y: scroll;
overflow-x: visible;
如果您阅读了定义溢出属性的 CSS 规范,您将在本节底部附近看到此段落:
溢出的可见/剪辑值计算为自动/隐藏 (分别)如果溢出-x 或溢出-y 之一都不可见 也不剪辑。
刚开始理解这一段有点困难,但是如果你设置了
overflow-y: scroll
,那么overflow-x: visible
就会计算为overflow-x: auto
。基本上你不能在一个轴上出现scrolling溢出,而在另一轴上出现visible溢出。这是规范所禁止的。