37

我有一个小 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>
4

2 回答 2

20

如果可以选择在 周围使用容器元素.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/）。

于 2013-04-30T19:03:50.743 回答
1

而不是使用和外部滚动条，为什么不使用一些正确的填充

   .alphabet{ display:inline-block;
               overflow-y:auto; 
               overflow-x:hidden;
               border:1px solid;
               height:50;
               padding-right:15px;
             }

或者，如果您愿意，可以使用 em 单位来匹配您使用的任何大小的字符

padding-right:1em;

PD：顺便说一句，您的示例中有一个错字。期间应该是之前它应该是 .alphabet {

于 2013-04-30T18:31:51.517 回答