1. ホーム
  2. jquery

[解決済み] FirefoxでアニメーションのscrollTopが機能しない

2022-04-25 08:35:13

質問

この関数は正常に動作します。これは、ボディを任意のコンテナのオフセットにスクロールさせます。

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

しかし、Firefoxではそうではない。なぜでしょうか?

-EDIT-

受理された回答で二重トリガーを処理するために、アニメーションの前に要素を停止させることを提案します。

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

解決方法は?

Firefoxはオーバーフローを html レベルでは、特に異なる動作をするようにスタイル設定されていない限りは

Firefoxで動作させるには、以下のようにします。

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

作業例

CSSで解決するには、以下のスタイルを設定することになります。

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

JSのソリューションが最も侵襲が少ないと推測されます。


更新情報

以下の議論では、アニメーションのための scrollTop の2つの要素でコールバックが2回呼び出されることになります。ブラウザ検出機能が提案され、その後非推奨となったが、いくつかは間違いなくかなり突飛な話である。

コールバックがべき等であり、多くの計算能力を必要としない場合、コールバックを2回実行することは全く問題ないでしょう。コールバックの複数回の起動が本当に問題で、機能検出を避けたい場合は、コールバックの内部から1回だけ実行するように強制する方が、より直接的かもしれません。

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');
}));