找回密码
陪学
533
0
先看一下动态面板做出来的滚动条是怎样的。
自带的这种滚动条有时会不符合我们的要求。那么就需要做出改动。以动态面板为例，我们一起来看看怎么来处理这个滚动条吧。
如果滚动条是不需要显示出来的话，只需要把动态面板的宽度加宽至滚动条不遮挡页面内容的程度，然后把滚动条用部件或者是其他图片遮挡住，从视觉上造成没有滚动条的效果。这种处理方法比较简单粗暴。
那如果要的是不同样式的滚动条呢？可以怎么做？
原来的滚动条像上面一样，将它遮盖起来。因为它是不可避免的，因为有滚动条，才能进行滚动。然后我们再去做一个符合自己需要的滚动条。
滚动条是我们在滚动页面的时候，它会跟着一起滚动，代表着当前是在页面的什么位置。那做好滚动条之后，就需要进行另外的设置，让它跟着我们的滚动而滚动。那我们下面做好这个设置就好了。
这时候的做法是，在动态面板滚动的时候，移动滚动条，让滚动条随着动态面板滚动而移动。那这我们要确定的是，动态面板从顶部到底部总共滚动的距离是多少，滚动条总共移动的距离是多少。
从这个案例里面可以看到，动态面板的滚动总距离是2073，滚动条的移动总距离是527。那么就可以来计算它们之间的比例关系了。假设，动态面板滚动了1的距离，滚动条要移动多少距离呢？就是527/2073。也就是原来的位置的基础上，再移动527/2073的距离。
得出了这个比例关系之后，就要让滚动条随动态面板滚动了。动态面板的滚动距离我们可以用scrollY函数直接来获取。根据我们上面得到的比例关系，就可以得出滚动条移动到什么位置了。
来看一下案例效果是怎样的。
这个案例的这种做法其实是不难的，要注意的是动态面板和滚动条之间的关系，这个关系明白之后，很简单就能做出来了。
在这个基础上，还能把滚动条做得更完善一点，大家如果有什么想法，或者想要知道的效果，都可以联系我们，一起共同进步！
（加微信：pexuepexue，小编邀请您进入全国产品经理交流群）
群内每日分享学习资料、重磅报告、面试问题、招聘信息、免费课程
更多精品文章查看：http://axure.pexue.com/PeiXue/Default.aspx
.png)
