将滚动条放在div外面,自动溢出

Question

我有一个小div,overflow:auto;但当滚动条出现时,它掩盖了很多div.这可以通过使用来避免overflow:scroll;,但是当没有溢出时你会得到难看的褪色滚动条.有没有办法将滚动条放在div之外而不使用overflow:scroll;？谢谢.

这是一个示范 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>

Answer 1

如果可以选择使用容器元素.alphabet,则可以在其上设置垂直滚动.我添加了<hr>假的一个始终可见的底部边框,它也不会在滚动条下面.

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/).