我想更改页面中滚动条的形状。现在它是常见的矩形形状,但我希望它是一种椭圆形 - 在矩形的顶部和底部都是圆形的。
我如何通过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;
}
答案 0 :(得分: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