发新贴  快速回复

妙味课堂视频里面的那个自定义滚动条的实现原理是什么???

  q307573744
2017-11-24 14:23

 请问怎么计算滚动条的长短。。。。。

2017年2月8日

举个简单例子帮助你快速理解


页面高1000px,显示的区域的高是100px。也就是有900px是需要通过滚动 滚动条才能显示。


那么就有: 显示的区域的高/页面高=滚动条高/显示的区域的高。


所以:100/1000=滚动条高/100


所以:滚动条高=(100*100)/1000=10px


如果觉得还是感觉不对,你可以继续这样理解。


页面高是100,显示区域也是100,那此刻滚动条肯定是充满整个显示区域高度的,固也是100。


带入上面的公式为:100/100=滚动条高/100    


可得出:滚动条高=100。说明公式(显示的区域的高/页面高=滚动条高/显示的区域的高)对的。


在模拟自定义滚动条的时候,我们刚好是可以知道 显示的区域的高、页面高,所以滚动条高度也是可以算的。


 


然后需要算出一个0-1之间的比例scale,如下:


var scale=moveY/(显示区域高-滚动条高)


其中moveY为拖动滚动条的距离(拖拽懂吧),那个拖拽范围就是0到(显示区域高-滚动条高),所以scale就会在0到1之间变化


比例出来就可以得出拖拽滚动条时:页面往上滚动的距离=(页面高-显示区域高)*scale;


测试一下:页面往上滚动的距离=(1000-100)*1=900,滚动条到底,页面最低。恩没毛病。


上面都是我自己想的,没有实际用代码操作一下,都是理论上原理。


所以你觉得哪里有错说一下。


 


 

2017-11-26 12:57  回复本帖
登录 后才可以发表回复