在css设置可改变大小的div滚动条样式方法：
1.首先新建html文档，进入代码书写界面。
2.在</head>和<body>的里面写入代码，在<div>里面写入想要输入的内容</div>。
3.书写外层轨道css代码。body::-webkit-scrollbar { width:20pxheight:2pxbackground:#cccborder-radius:10px/*外层轨道*/}
这里主要是设置外层轨道的形状和颜色。
4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:blockwidth:6pxmargin:0 autoborder-radius: 10pxbackground:red/*内层轨道*/}
这里主要是设置内层轨道的形状和颜色。
5.代码工作做完后，就可以查看效果，效果如下红框所示，滚动条设置完成。
目前只有chrome支持设置滚动条样式，给div设置伪类
::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
如div::-webkit-scrollbar{
width:4px
}
完全可以哦，滑动式的利用css的hover，也就是纯css菜单的原理，
点击式的利用的是锚点的原理。
实例如下：
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>纯CSS实现的Tab</title>
<style>
*{ margin:0 padding:0}
#main{width:500px margin:100px auto}
#title>a{ float:left border:1px solid #000 padding:2px 4px display:block text-decoration:none color:#000}
#content{ width:500px height:300px border:1px solid #000 overflow:hidden}
#content>div{float:left padding:2px 4px width:500px height:300px}
#a1:hover #a2>#tab2{ display:block}
</style>
</head>
<body>
<div id="main">
<div id="title">
<a href="#tab1">tab1title</a>
<a href="#tab2">tab2title</a>
<a href="#tab3">tab3title</a>
<a href="#tab4">tab4title</a>
<div style="clear:both"></div>
</div>
<div id="content">
<div id="tab1"> tab1 content </div>
<div id="tab2"> tab2 content </div>
<div id="tab3"> tab3 content </div>
<div id="tab4"> tab4 content </div>
<div style="clear:both"></div>
</div>
</div>
</body>
</html>
