优先使用 requestAnimationFrame实现。
实验中发现,IE中的requestAnimationFrame 对象,在页面载入的时候,似乎是不可用的。 所以在 domContentLoaded事件以后再读取,才是安全的。
实验中发现,IE中的requestAnimationFrame 对象,在页面载入的时候,似乎是不可用的。 所以在 domContentLoaded事件以后再读取,才是安全的。
<script>
//没有输出!
console.log(window.requestAnimationFrame || window.msRequestAnimationFrame );
window.onDomContentLoaded = function(){
//这里就有了。
console.log(window.requestAnimationFrame || window.msRequestAnimationFrame);
}
</script>
function scrollUp(){
//IE10+/Android Browser4.4+/
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame || window.msRequestAnimationFrame
|| function(clb){
return setTimeout(clb,1000/60);
};
var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame
|| window.webkitCancelAnimationFrame || window.msCancelAnimationFrame
|| function(id){clearTimeout(id);};
//document.getElementById("imagePreview").scrollIntoView();
//document.body.scrollTop = "0px";
var top = document.body.scrollTop || document.documentElement.scrollTop;
//滚动时长
var duration = 300; //300ms
//计算步长
var step = top / (duration / ( 1000 / 60)) >> 0; //取整
//window.console && console.log(requestAnimationFrame);
function fn(){
if(top >= 0){
top -= step;
document.documentElement.scrollTop = document.body.scrollTop = top;
fn.rafTimer = requestAnimationFrame(fn);
}else{
document.body.scrollTop = 0;
cancelAnimationFrame(fn.rafTimer);
}
}
fn.rafTimer = requestAnimationFrame(fn);
}