1、第一，我们来看今天实现滚动条的效果：
默认没有滚动条出现，当鼠标放上去后有滚动条效果，而且鼠标放上去后，滚动条的颜色会比原来加深些
这样的效果是不是以前在哪儿见过？
我们在前面说的， scroll-indicator效果是不是很像呢？
如下图所示效果
不同的是，这样的效果，我们不能改变形状和颜色
![htmlayout设计ui 基础篇：[17]自定义滚动条一](https://exp-picture.cdn.bcebos.com/555acf0ff2260d9ac23ce92a622abab84340a58a.jpg)
2、第二，今天我们来说下，如何实现下面滚动条的显示效果
![htmlayout设计ui 基础篇：[17]自定义滚动条一](https://exp-picture.cdn.bcebos.com/e86ba4b842406afe3a260f761eee41c1b6279f8a.jpg)
3、第三，我们来看下代码怎么写：
<style>
@set v-scroll-indicator {
.slider
{
background:#f8f8f8;
border-radius:5px;
margin:0;
}
}
body{
width:*;
height:800px;
}
div.vscroll {
vertical-scrollbar: "v-scroll-indicator";
}
</style>
说明：1、@set v-scroll-indicator用来定义.slider(滚动条)的显示样式，默认是直角显示效果
2、加上 border-radius:5px;这个效果，就变成我们想要的效果（如上图所示）
3、div.vscroll是所在层区域所要用到的效果，引用刚才我们定义好的v-scroll-indicator，就可以了
4、第四，正文中所需的代码是：
<body>
< div.vscroll >
<div>内容显示....</div>
</div>
</body>
5、到上面就已经可以实现我们要的效果了，你可以自己尝试做下，看下效果～
