javascript - 请问cancelAnimationFrame的使用方法

问题描述

问 题

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function( callback ){
            window.setTimeout(callback, 1000 / 60);
        };
})();

function backTop(){
    var scrollingElement = document.scrollingElement || document.documentElement || document.body;
    scrollingElement.scrollTop = scrollingElement.scrollTop - 10;
    console.log(scrollingElement.scrollTop == 0 )
    if( scrollingElement.scrollTop == 0 ){ cancelAnimationFrame(aaa) }
    requestAnimFrame(backTop)
};
var aaa;
function aa() {
    aaa = requestAnimFrame(backTop)
}

目前开始了不知道是怎么才能停下的。。

解决方案

Edit:
经测试，改成这样就行了。
scrollingElement是scrollTop值的副本，直接修改它的值是不会影响scrollTop的。

var aaa;
function backTop(){
    var scrollingElement =  document.documentElement.scrollTop || document.body.scrollTop;
    
    document.body.scrollTop = scrollingElement - 10;
    
    if( scrollingElement === 0 ) {
        cancelAnimationFrame(aaa);
    } else {
        aaa = requestAnimFrame(backTop)
    }
};

这篇关于javascript - 请问cancelAnimationFrame的使用方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！