为什么改成负的就能滚到头
为什么改成负的就能滚到头
为什么改成负的就能滚到头
2014-11-26
回答这个问题前,先来看下为什么不改成负数就不行呢?
注意这句:var ispeed = Math.floor(osTop / 6);
当上面osTop的值小于6这个除数时,ispeed的值始终等于0(向下取整了),所以问题来了,当ispeed的值不变时,osTop - ispeed 这个控制滚动条的值也就不变了,所以滚动条永远到不了顶。
实际中,当osTop = 5 时,ispeed 为 0,下面两句也始终为5:
document.documentElement.scrollTop = osTop - ispeed; // 兼容IE
document.body.scrollTop = osTop - ispeed; // 兼容FF、Chrome
所以滚动条一直停在距离顶部5px的地方。
OK,那为什么改成负数就行了呢?其实改负数的目的就是让ispeed的值不为0.
实际中,当osTop = 5(或小于5时),Math.floor(osTop / 6) 的值为 -1,这样就使得 osTop + ispeed 的值始终能减小下去,直至到0.
这种用负数的方法不好理解,我是采用Math.ceil()这个方法(向上取整)实现的,代码如下:
obtn.onclick = function(){
// 定时器开启
timer = setInterval(function(){
// 获取当前滚动条距离顶部距离
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
var ispeed = Math.ceil(osTop / 6);
document.documentElement.scrollTop = osTop - ispeed;
document.body.scrollTop = osTop - ispeed;
if(osTop == 0){
clearInterval(timer);
}
},30);
}
举报