把滚动条外面的div与自动溢出 [英] put scroll bar outside div with auto overflow
问题描述
我有一个小的div与 overflow:auto;
但是当滚动条出现它覆盖了大量的div。这可以通过使用 overflow:scroll;
来避免,但是当没有溢出时,你会得到不好看的滚动条。有没有办法将滚动条放在div之外,而不使用 overflow:scroll;
?非常感谢。
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.
这里是一个演示 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>
推荐答案
如果是一个选项, code> .alphabet ,你可以设置垂直滚动。我添加了< hr>
来伪造永远可见的底部边框,这也不会在滚动条下面。
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.
HTML:
<div class="container">
<div class="alphabet">
abcdefgh<br />
abcdefgh<br />
abcdefgh<br />
abcdefgh<br />
</div>
</div>
<hr>
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;
}
内边框:http://jsfiddle.net/Q32gG/1/
如果你实际上不关心滚动条显示在里面边框,您可以删除< hr>
,并将 .container
=http://jsfiddle.net/V3MbV/3/> http://jsfiddle.net/V3MbV/3/ )。
If you don't actually care about the scrollbar showing inside the border, you can drop the <hr>
and add a full border to .container
instead (http://jsfiddle.net/V3MbV/3/).
这篇关于把滚动条外面的div与自动溢出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!