Vanilla JS本机卷轴动画不适用于FF



我有以下内容:

class FloatingBtn {
    constructor (s) {
        this.button = s.button;
    }
}
FloatingBtn.prototype.showOnScroll = function(windowPos) {
    if(windowPos > 120){
        this.button.classList.add('opacity-on');
    }
    else {
        this.button.classList.remove('opacity-on');
    }
}
//t = current time
//b = start value
//c = change in value
//d = duration
Math.easeInOutQuad = function (t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
};
FloatingBtn.prototype.scrollTo = function(element, to, duration) {
    let start = element.scrollTop,
        change = to - start,
        currentTime = 0,
        increment = 20;
    let animateScroll = function(){        
        currentTime += increment;
        console.log(change);
        let val = Math.easeInOutQuad(currentTime, start, change, duration);
        element.scrollTop = val;
        if(currentTime < duration) {
            setTimeout(animateScroll, increment);
        }
    };
    animateScroll();
}
FloatingBtn.prototype.scrollBackToTop = function() {
    this.button.addEventListener('click', () => {
        this.scrollTo(document.body, 0, 700);
    });
}
export default FloatingBtn;

它在Chrome和Safari上效果很好,但在FF上不能。该页面根本不会滚动到顶部。也没有扔向控制台的错误。

Firefox不再支持document.body.scrollTop。相反,您必须使用document.documentElement.scrollTop

您可以更改点击处理程序以使用三元字母来确定正确的元素

this.scrollTo( document.body.scrollTop == 0 ? document.documentElement : document.body, 0, 700 );

您还必须使用诸如document.body.scrollTop || document.documentElement.scrollTop

之类的内容更改scollto函数中的start变量

最新更新