做一个自定义滚动条

关于滚动条，大家知道有一些部件可以设置自带的滚动条，来达到滚动的效果，比如动态面板。但是系统自带的滚动条有一个通病：不太好看并且不能修改样式。那我们怎么做好看的滚动条呢？需要我们去做设置。

先看一下动态面板做出来的滚动条是怎样的。

​

自带的这种滚动条有时会不符合我们的要求。那么就需要做出改动。以动态面板为例，我们一起来看看怎么来处理这个滚动条吧。

如果滚动条是不需要显示出来的话，只需要把动态面板的宽度加宽至滚动条不遮挡页面内容的程度，然后把滚动条用部件或者是其他图片遮挡住，从视觉上造成没有滚动条的效果。这种处理方法比较简单粗暴。

那如果要的是不同样式的滚动条呢？可以怎么做？

原来的滚动条像上面一样，将它遮盖起来。因为它是不可避免的，因为有滚动条，才能进行滚动。然后我们再去做一个符合自己需要的滚动条。

滚动条是我们在滚动页面的时候，它会跟着一起滚动，代表着当前是在页面的什么位置。那做好滚动条之后，就需要进行另外的设置，让它跟着我们的滚动而滚动。那我们下面做好这个设置就好了。

这时候的做法是，在动态面板滚动的时候，移动滚动条，让滚动条随着动态面板滚动而移动。那这我们要确定的是，动态面板从顶部到底部总共滚动的距离是多少，滚动条总共移动的距离是多少。

从这个案例里面可以看到，动态面板的滚动总距离是2073，滚动条的移动总距离是527。 那么就可以来计算它们之间的比例关系了 。假设，动态面板滚动了1的距离，滚动条要移动多少距离呢？就是527/2073。也就是原来的位置的基础上，再移动527/2073的距离。

得出了这个比例关系之后，就要让滚动条随动态面板滚动了。动态面板的滚动距离我们可以用scrollY函数直接来获取。根据我们上面得到的比例关系，就可以得出滚动条移动到什么位置了。

 来看一下案例效果是怎样的。

​

这个案例的这种做法其实是不难的，要注意的是动态面板和滚动条之间的关系，这个关系明白之后，很简单就能做出来了。

在这个基础上，还能把滚动条做得更完善一点，大家如果有什么想法，或者想要知道的效果，都可以联系我们，一起共同进步！

​

（加微信：pexuepexue，小编邀请您进入全国产品经理交流群）

群内每日分享学习资料、重磅报告、面试问题、招聘信息、免费课程

更多精品文章查看：http://axure.pexue.com/PeiXue/Default.aspx