把滚动条外面的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屋！