0

jQuery アニメーション関数を使用して #wrapper div (z-index:2) を右にスライドさせ、その後ろに #menu div (z-index:1) を表示すると、#wrapper div のリセットはユーザーが行ったスクロールになります。その上で。

問題を示す jsFiddle を次に示します。#wrapper div (「Main #」のあるもの) をスクロールし、「メニューを開く/閉じる」リンクをクリックしてアニメーションを有効にすると、スクロールがリセットされます。これが原因であることはわかってposition:fixedいますが、メニューが開かれたときにスクロールする唯一の div が #menu の div であり、#wrapper の div ではないために必要です。

href="javascript:void(0)"アニメーションを起動するボタンとreturn false;クリック機能を使ってみました。何も機能しません。

#wrapper div がスクロールをリセットしないようにするにはどうすればよいですか? または #menu div が表示されたら、#wrapper div のスクロールをロックするにはどうすればよいですか?

4

1 に答える 1

0

return false.Click() コールバック関数で使用すると、div がスクロールできなくなりますが、残念ながら両方の div のスクロール量が同じになります。望ましい効果は、ユーザーがページをリロードするまで、各 div が独自のスクロール量を一貫して維持することです。

両方の div のスクロール量を保存し、アニメーション コールバック関数でそれらを復元することで、この問題を回避しました。これが私のメソッドを示すjsFiddleです。

これはデスクトップ ブラウザーではシームレスに機能しますが、「再配置とスクロール」コールバック メソッドは、

menu.css("position","fixed");
content.css("position","absolute").css("top","0");
window.scrollTo(0,contentScroll);

と

menu.css("top","0");
window.scrollTo(0,menuScroll);

モバイル ブラウザーでは非常に遅いため、div の再配置とスクロールが見られ、アニメーションがひどく見えます。これは、デスクトップ向けまたはモバイル向けにデザインしているが、美しさよりも機能性を重視する場合に適した方法です。タブレットではテストしていません。

于 2013-02-26T12:54:30.813 に答える