Html 内容上方的滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24671317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrollbar above content
提问by Forex
In the following code, I'm trying to build table like design with flexbox display model.
在以下代码中，我尝试使用 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>My problem is, that in second row (with that "huge content") is scrollbar, and that scrollbar is taking space from my row cells and that's huge problem because my columns don't have the same width and it doesn't look like a table.
我的问题是，第二行（带有“大量内容”）是滚动条，滚动条占用了我的行单元格的空间，这是一个大问题，因为我的列的宽度不同，而且看起来不像一张桌子。
Things I can't use:
我不能使用的东西：
- my own implementation of scrollbars (performance is an issue).
- fixed widths of columns or
.container(components height and width has to adapt).
- 我自己的滚动条实现（性能是一个问题）。
- 列的固定宽度或
.container（组件高度和宽度必须适应）。
So, I need to make the scrollbar in the second row to be above that content and not to take that space.
因此，我需要使第二行中的滚动条位于该内容上方，而不是占用该空间。
回答by Forex
回答by Dr J Manish
I think you are looking for this..
我想你正在寻找这个..
Code used -
使用的代码 -
::-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;
}
