![](https://i-blog.csdnimg.cn/blog_migrate/8863095115eb92ffb88b5997ea2ee575.jpeg)
关于滚动条,大家知道有一些部件可以设置自带的滚动条,来达到滚动的效果,比如动态面板。但是系统自带的滚动条有一个通病:不太好看并且不能修改样式。那我们怎么做好看的滚动条呢?需要我们去做设置。
先看一下动态面板做出来的滚动条是怎样的。
![](https://i-blog.csdnimg.cn/blog_migrate/2587824c9731f7ae1f52b8e43ab2014a.jpeg)
自带的这种滚动条有时会不符合我们的要求。那么就需要做出改动。以动态面板为例,我们一起来看看怎么来处理这个滚动条吧。
如果滚动条是不需要显示出来的话,只需要把动态面板的宽度加宽至滚动条不遮挡页面内容的程度,然后把滚动条用部件或者是其他图片遮挡住,从视觉上造成没有滚动条的效果。这种处理方法比较简单粗暴。
那如果要的是不同样式的滚动条呢?可以怎么做?
原来的滚动条像上面一样,将它遮盖起来。因为它是不可避免的,因为有滚动条,才能进行滚动。然后我们再去做一个符合自己需要的滚动条。
这时候的做法是,在动态面板滚动的时候,移动滚动条,让滚动条随着动态面板滚动而移动。那这我们要确定的是,动态面板从顶部到底部总共滚动的距离是多少,滚动条总共移动的距离是多少。
![](https://i-blog.csdnimg.cn/blog_migrate/edebd1661ba72de71d555a811bc0d6f2.jpeg)
得出了这个比例关系之后,就要让滚动条随动态面板滚动了。动态面板的滚动距离我们可以用scrollY函数直接来获取。根据我们上面得到的比例关系,就可以得出滚动条移动到什么位置了。
![](https://i-blog.csdnimg.cn/blog_migrate/71882c22d8d04670aea5c26f462b02b8.jpeg)
来看一下案例效果是怎样的。
![](https://i-blog.csdnimg.cn/blog_migrate/303ab24f8e4527f710c2696709aa7b64.gif)
这个案例的这种做法其实是不难的,要注意的是动态面板和滚动条之间的关系,这个关系明白之后,很简单就能做出来了。
在这个基础上,还能把滚动条做得更完善一点,大家如果有什么想法,或者想要知道的效果,都可以联系我们,一起共同进步!
(加微信:pexuepexue,小编邀请您进入全国产品经理交流群)
群内每日分享学习资料、重磅报告、面试问题、招聘信息、免费课程
更多精品文章查看:http://axure.pexue.com/PeiXue/Default.aspx
![](https://i-blog.csdnimg.cn/blog_migrate/05da2bd5c99a0fc016c721fd34dcfc5e.jpeg)