html – 将滚动条放在外部div与自动溢出

发布时间：2020-12-14 21:32:20 所属栏目：资源来源：网络整理

导读：我有一个小div与溢出：自动;但是当滚动条出现时，它覆盖了大量的div。这可以通过使用overflow：scroll …来避免，但是当没有溢出时，您会得到不好看的褪色的滚动条。有没有一种方法可以将滚动条放在div之外，而不使用overflow：scroll;？谢谢。这里是一个演

我有一个小div与溢出：自动;但是当滚动条出现时，它覆盖了大量的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>

解决方法

如果您可以选择在.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/)。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!