Javascript vanilla JS本机滚动动画不适用于FF
我有以下资料:Javascript vanilla JS本机滚动动画不适用于FF,javascript,Javascript,我有以下资料: class FloatingBtn { constructor (s) { this.button = s.button; } } FloatingBtn.prototype.showOnScroll = function(windowPos) { if(windowPos > 120){ this.button.classList.add('opacity-on'); } else {
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;
类浮动btn{
建造商{
this.button=s.button;
}
}
FloatingBtn.prototype.showOnScroll=函数(windowPos){
如果(窗口位置>120){
this.button.classList.add('opacity-on');
}
否则{
this.button.classList.remove('opacity-on');
}
}
//t=当前时间
//b=起始值
//c=价值变化
//d=持续时间
Math.easeInOutQuad=函数(t,b,c,d){
t/=d/2;
如果(t<1)返回c/2*t*t+b;
t--;
返回-c/2*(t*(t-2)-1)+b;
};
FloatingBtn.prototype.scrollTo=函数(元素、到、持续时间){
让start=element.scrollTop,
改变=开始,
currentTime=0,
增量=20;
让animateScroll=function(){
当前时间+=增量;
控制台日志(更改);
设val=Math.easeInOutQuad(当前时间、开始、更改、持续时间);
element.scrollTop=val;
如果(当前时间<持续时间){
设置超时(动画滚动,增量);
}
};
动画滚动();
}
FloatingBtn.prototype.scrollBackToTop=函数(){
此.button.addEventListener('单击',()=>{
this.scrollTo(document.body,0700);
});
}
导出默认浮动BTN;
它在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的内容更改scrollTo函数中的start
变量