如何实现垂直滚动区域内元素可在容器外显示？overflow属性问题

当你给容器设置overflow-y: scroll时，浏览器会强制将overflow-x的计算值设为auto（而非你设置的visible），这是CSS规范的规定，目的是避免滚动容器出现意外的横向溢出。这就导致你的绿色.inner盒子被容器裁剪，无法显示在外部。

要解决这个问题，我们可以把滚动功能和内容承载分离，具体修改如下：

修改后的代码 #

CSS #

.scroll-container {
  height: 200px;
  width: 100px;
  overflow-y: scroll;
  /* 浏览器会自动将overflow-x设为auto，但我们通过内部容器规避裁剪 */
}

.content {
  /* 不设置overflow，允许内部元素横向溢出 */
}

.item {
  position: relative;
  height: 30px;
  width: 30px;
  border: 2px solid red;
  margin: 4px 0;
}

.inner {
  position: absolute;
  top: 5px;
  left: 35px; /* 调整位置，让绿色盒子显示在红色盒子右侧 */
  border: 2px solid green;
  width: 200px;
  height: 15px;
}

HTML #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="scroll-container">
    <div class="content">
      <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>
  </div>
</body>
</html>

原理说明 #

• .scroll-container只负责提供垂直滚动功能，它的宽度限制的是自身可视区域的宽度，不会强制裁剪内部.content的横向内容。
• .content作为内容的直接容器，不设置任何overflow属性，所以内部绝对定位的.inner盒子可以完全溢出到.scroll-container外部，不会被裁剪。
• 调整.inner的left值是为了让它避开红色.item的区域，更清晰地展示溢出效果，你可以根据需求修改这个值。

内容的提问来源于stack exchange，提问作者Test