内容上方的滚动条

Question

在下面的代码中，我尝试使用flexbox显示模型来构建表格样式的设计。

.wrapper {
    width: 500px;
    height: 150px;
    background: grey;
}
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.row {
    display: flex;
    flex-direction: row;
    flex: 1;
    border: 3px solid green;
}
.cell {
    flex: 1;
    border: 1px solid red;
}

<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class="cell">1</div>
      <div class="cell">2</div>
      <div class="cell">3</div>
    </div>
    <div class="row" style="overflow: auto;">
      <div class="cell">1</div>
      <div class="cell">
        <div style="height: 200px;">huge content</div>
      </div>
      <div class="cell">3</div>
    </div>
    <div class="row">
      <div class="cell">1</div>
      <div class="cell">2</div>
      <div class="cell">3</div>
    </div>
  </div>
</div>

我的问题是，在第二行（那个“巨大的内容”）中有一个滚动条，而且滚动条正在从我的行单元格中占用空间，这是一个巨大的问题，因为我的列没有相同的宽度，看起来不像表格。

我不能使用的东西：

• 自己实现滚动条（性能是一个问题）。
• 固定列或 .container 的宽度（组件的高度和宽度必须适应）。

组件的真实世界用法

所以，我需要让第二行的滚动条位于内容上方，而不是占用那个空间。

- Forex

---

你已经在其中一个div中硬编码了overflow: auto，把它拿出来就可以了。 - Andrew Matthew

请避免混合使用内联和外部CSS规则... - T J

当我删除style =“overflow：auto;”时，我无法在第二行中滚动我的内容。 - Forex

Answer 1

我发现有一个"overflow:overlay"的属性，它可以达到我想要的效果。

它会渲染滚动条，但不占用该空间。

请参见：演示

- Forex

---

请注意，这是一个仅适用于 WebKit 的属性。对于 IE10+/Edge，您可以使用“-ms-overflow-style：-ms-autohiding-scrollbar;”来实现类似的效果，但是如果光标不在目标元素上，则滚动条会自动隐藏。 - Jacob van Lingen

"overflow: overlay" 已被弃用，只在基于 Webkit 和 Blink 的浏览器中得到支持。更多信息请参考 developer.mozilla.org/en-US/docs/Web/CSS/overflow。 - Samantha

现在这个方法不起作用了。即使设置了 overflow:overlay;，滚动条仍会出现。 - alanhchoi

你知道怎样让滚动条在数据上面并且在不聚焦或不悬停于可滚动区域时不消失吗？ - Fillyjonk

不支持自Chrome 114起。请参考https://caniuse.com/?search=overlay。 - user5474476

Answer 2

我认为您正在寻找这个.. JSFIDDLE

所使用的代码 -

::-webkit-scrollbar {
    width: 10px;
    height:10px;

}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8); 
    border-radius: 6px;
    background-color: grey;
}

::-webkit-scrollbar-thumb {
    border-radius: 6px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); 
    background-color: grey;
}

- Dr Manish Lataa-Manohar Joshi

---

正如您在组件使用中所看到的，我在第二行的所有三列中都有内容，因此我无法仅使用中间列滚动。 - Forex

你想要第二列和所有行都有滚动条，是吗？ - Dr Manish Lataa-Manohar Joshi

我需要在第二列和第二行滚动。我已经用JavaScript实现了第二列的滚动，但是我需要本地实现第二行（整行而不仅仅是某些列）的滚动。 - Forex