css滚动条宽度和圆形效果

时间:2013-09-23 14:32:20

标签: css

有没有办法在潜水中设置滚动条的默认宽度? 我有一个自动滚动条div。我想要将滚动条的宽度设置为细线并隐藏它的顶部和底部箭头标记。

4 个答案:

答案 0 :(得分:12)

您可以使用CSS的WebKit功能:

您可以阅读here

例如:

::-webkit-scrollbar {
width: 12px;
}

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

::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px     rgba(0,0,0,0.5); 
}

会创建类似iOS的滚动条(DEMO

祝你好运

答案 1 :(得分:2)

你应该看看这个。在每个浏览器中都很棒。

它非常易于使用,并且可以从滚动(颜色,宽度和您想要的任何内容)更改所有可能的样式。

http://manos.malihu.gr/jquery-custom-content-scroller/

- > direct link to demo page

答案 2 :(得分:0)

滚动条依赖于浏览器/工具包,无法直接由CSS控制。您可以使用JavaScript实现自己的滚动条,但这是很多工作。

答案 3 :(得分:0)

此链接:http://www.noupe.com/javascript/30-javascriptajax-techniques-for-sliders-scrollers-and-scrollbars.html

应该让您开始使用JavaScript / Ajax滚动条。如果你对课程感兴趣的话。