动画scrollTop不工作在Firefox [英] Animate scrollTop not working in firefox

问题描述

这个函数工作正常。它将主体滚动到所需容器的偏移位置。

 函数scrolear（destino）{
 var stop = $（destino） .offset（）顶部。 
 var delay = 1000; 
 $（'body'）。animate（{scrollTop：stop}，delay）; 
返回false; 
} 
  

但是不能在Firefox中使用。为什么？

-EDIT -

为了处理接受的答案中的双重触发器，我建议停止元素在动画之前：

  $（'body，html'）。stop（true，true）.animate（{scrollTop：stop延迟）; 
  

解决方案 > html level，除非具体表现为不同的表现。

要在Firefox中使用，请使用

  $（'body，html'）。animate（...）; 
  

工作示例

CSS解决方案将设置以下样式：

  html {overflow：hidden;身高：100％ } 
 body {overflow：auto;身高：100％ } 
  

我会假定JS解决方案的侵入性最小。

---

更新

事实上，动画两个元素的 scrollTop 会导致回调被调用两次。浏览器检测功能已被建议，随后被弃用，有些可能是相当牵强的。

如果回调是幂等的，并且不需要大量的计算能力，发射两次可能是完全没有问题的。如果回调的多个调用确实是一个问题，并且如果您想要避免功能检测，则可以更直接地强制回调仅在回调中运行一次：

 函数runOnce（fn）{
 var count = 0; 
 return function（）{
 if（++ count == 1）
 fn.apply（this，arguments）; 
}; 
}; 
 $ b $（'body，html'）。animate（{scrollTop：stop}，delay，runOnce（function（）{
 console.log（'scroll complete'）; 
}））; 
  

This function works fine. It scrolls the body to a desired container's offset

function scrolear(destino){
    var stop = $(destino).offset().top;
    var delay = 1000;
    $('body').animate({scrollTop: stop}, delay);
    return false;
}

But not in Firefox. Why?

-EDIT-

To handle de double trigger in the accepted answer, I suggest stoping the element before the animation:

$('body,html').stop(true,true).animate({scrollTop: stop}, delay);

解决方案

Firefox places the overflow at the html level, unless specifically styled to behave differently.

To get it to work in Firefox, use

$('body,html').animate( ... );

Working example

The CSS solution would be to set the following styles:

html { overflow: hidden; height: 100%; }
body { overflow: auto; height: 100%; }

I would assume that the JS solution would be least invasive.

---

Update

A lot of the discussion below focuses on the fact that animating the scrollTop of two elements would cause the callback to be invoked twice. Browser-detection features have been suggested and subsequently deprecated, and some are arguably rather far-fetched.

If the callback is idempotent and doesn't require a lot of computing power, firing it twice may be a complete non-issue. If multiple invocations of the callback are truly an issue, and if you want to avoid feature-detection, it might be more straight-forward to enforce that the callback is only run once from within the callback:

function runOnce(fn) { 
    var count = 0; 
    return function() { 
        if(++count == 1)
            fn.apply(this, arguments);
    };
};

$('body, html').animate({ scrollTop: stop }, delay, runOnce(function() {
   console.log('scroll complete');
}));

这篇关于动画scrollTop不工作在Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！