Html 将滚动条放在带有自动溢出的 div 之外
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16306322/
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
put scroll bar outside div with auto overflow
提问by user2014429
I have a small div with overflow:auto;but when the the scroll bar appears it covers up a great deal of the div. This can be avoided by using overflow:scroll;, but then you get the unsightly faded scroll bar when there is no overflow. Is there a way of putting the scroll bar outside of the div without using overflow:scroll;? Thanks.
我有一个小的 div，overflow:auto;但是当滚动条出现时，它覆盖了大量的 div。这可以通过使用来避免overflow:scroll;，但是当没有溢出时，你会得到难看的褪色滚动条。有没有办法将滚动条放在 div 之外而不使用overflow:scroll;？谢谢。
here is a demonstration jsfiddle
这是一个演示 jsfiddle
.alphabet{ display:inline-block;
overflow-y:auto;
overflow-x:hidden;
border:1px solid;
height:50;
}
<div class = "alphabet">abcdefgh<br>
ijklmnop<br>
qrstuvwx
</div>
采纳答案by Lily
If it's an option to use a container element around .alphabet, you can set the vertical scroll on that. I've added the <hr>to fake an always-visible bottom border that won't also go under the scrollbar.
如果可以选择在 周围使用容器元素.alphabet，则可以在其上设置垂直滚动。我添加了<hr>来伪造一个始终可见的底部边框，该边框也不会出现在滚动条下方。
HTML:
HTML：
<div class="container">
<div class="alphabet">
abcdefgh<br />
abcdefgh<br />
abcdefgh<br />
abcdefgh<br />
</div>
</div>
<hr>
CSS:
CSS：
.container{
overflow-y:auto;
overflow-x:hidden;
height:50px;
width:100px;
}
.alphabet{
width:100%;
overflow:visible;
box-sizing:border-box;
border:1px solid;
border-bottom:0;
}
hr{
margin:0;
height:0;
width:85px;
border:0;
border-bottom:1px solid;
}
With inner border: http://jsfiddle.net/Q32gG/1/
带内边框：http: //jsfiddle.net/Q32gG/1/
If you don't actually care about the scrollbar showing inside the border, you can drop the <hr>and add a full border to .containerinstead (http://jsfiddle.net/V3MbV/3/).
如果您实际上并不关心在边框内显示的滚动条，您可以删除<hr>并添加一个完整的边框.container（http://jsfiddle.net/V3MbV/3/）。
回答by Fico
Instead of using and outside-scrollbar, why not to use some right padding as so
而不是使用和外部滚动条，为什么不使用一些正确的填充
.alphabet{ display:inline-block;
overflow-y:auto;
overflow-x:hidden;
border:1px solid;
height:50;
padding-right:15px;
}
Or if you prefer, using em units to match a character whatever size you are using
或者，如果您愿意，可以使用 em 单位来匹配您使用的任何大小的字符
padding-right:1em;
PD: By the way there is a typo in your example. The period should be previous it should be .alphabet {
PD：顺便说一下，你的例子中有一个错字。期间应该是之前的应该是 .alphabet {
