香草JS原生滾動動畫不工作的FF

Question

我有以下幾點：

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。該頁面根本不滾動到頂部。沒有錯誤引發到控制檯。

Answer 1

Firefox不再支持document.body.scrollTop。相反，你必須使用document.documentElement.scrollTop。

您可以更改點擊處理程序使用三元以確定正確的元素

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

您也可以更改scrollTo功能start變量，使用類似document.body.scrollTop || document.documentElement.scrollTop