[解決済み] 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');
}));
関連
-
echarts-all.js:1 Uncaught TypeError: nullのプロパティ'getAttribute'を読み取ることができません。
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] Firefox または Chrome ブラウザから HTTP POST リクエストを手動で送信する方法
-
[解決済み] CSSでFirefoxだけをターゲットにする
-
[解決済み] jQuery.ajaxでmultipart/formdataを送信する。
-
[解決済み] jQueryでPUT/DELETEリクエストを送信する方法は?
-
[解決済み] jQueryを使用してCSSのdisplay noneまたはblockプロパティを変更するにはどうすればよいですか?
-
[解決済み】フォームのhiddenフィールドにjQueryの".val() "を使って値を設定してもうまくいかない。
-
[解決済み] $(window).scrollTop() vs. $(document).scrollTop()
-
[解決済み] jQuery .scrollTop(); + アニメーション
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] クラスメソッド内の "this "をタイプスクリプトで記述する
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryでチェックボックスの値を取得する
-
[解決済み] jQueryでPUT/DELETEリクエストを送信する方法は?
-
[解決済み] .on('click') と .click() の違いについて
-
[解決済み] Twitter Bootstrapのモーダルウィンドウを閉じないようにする
-
[解決済み] jQueryがどのバージョンで読み込まれているかを確認するには?
-
[解決済み] val()を使ってselectの値を設定しても、jqueryのchangeイベントが発生しないのはなぜですか?
-
[解決済み] jQueryの.ajax()メソッドが私のセッションクッキーを送信しないのはなぜですか?
-
[解決済み] Jqueryのコードはヘッダーとフッターのどちらに入れるべきですか?