newheader
手机登录
账密登录
登录
还没有账号? 马上注册
手机登录
账密登录
验证码图片
忘记密码?
登录
还没有账号? 马上注册
欢迎注册陪学网账号
已经有账号? 马上登录
做一个自定义滚动条
陪学
2018-05-25 13:26:25
402
0
关于滚动条,大家知道有一些部件可以设置自带的滚动条,来达到滚动的效果,比如动态面板。但是系统自带的滚动条有一个通病:不太好看并且不能修改样式。


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


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

 

 

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

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


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

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

 

 

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

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


 
 

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

 

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

 


 


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

 

 

 

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

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



(加微信:pexuepexue,小编邀请您进入全国产品经理交流群)

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

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

 

 

长按二维码或加微信pexuepexue
进陪学产品交流群回复:资料分享
免费获取资料:每日更新 免费课程、学习资料、报告、招聘面试
标签:
登录 后参与讨论
发表
全部评论
没有更多评论了
newfooter
陪学网专注于产品管理类课程的开发与制作,
志在为产品经理、交互设计、平面设计、需求人员分享最新、最好的产品类课程。
陪学网:陪伴学习、陪伴成长
粤ICP备18075915号