3

我想更改页面中滚动条的形状。现在它是常见的矩形，但我希望它是一种椭圆形 - 在矩形的顶部和底部都是圆形的。

我如何通过 CSS 实现这一点？或者这根本不可能。我正在寻找在 IE10 中支持这一点。这是我拥有的滚动条的CSS。

.scrollbar-vertical
{
    top: 0;
    right: 0;
    width: 17px;
    height: 100%;
    overflow-x: hidden;
    scrollbar-3dlight-color:#999;
    scrollbar-arrow-color:white;
    scrollbar-base-color:white;
    scrollbar-face-color:#999;
    border-radius:5px 5px;

}
4

1 回答 1

2

查看此页面以获得良好的起点http://cssdeck.com/labs/css3-webkit-vertical-scrollbars。不幸的是，这些仅适用于使用 webkit 的浏览器。

要获得圆形椭圆形滚动条，您可以执行以下操作：

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #D62929;
}

未经测试，您可以使用此页面上看到的 jQuery 自定义滚动条：http: //manos.malihu.gr/tuts/jquery_custom_scrollbar.html

于 2013-07-19T17:02:47.293 回答