Mobile Safari でスクロール ロック Div を実装するにはどうすればよいですか?

Mobile Safari のスクロール ロック Div

要素の "position: fixed" プロパティは固定位置の一般的なアプローチですが、 Mobile Safari では制限に直面しています。しかし、Gmail からは、メッセージ ビューにフローティング メニュー バーを表示するという賢い解決策が登場しました。

この手法では、固定位置で div を作成し、JavaScript の window.onscroll イベントを利用して、スクロール時にその最上位プロパティを更新します。その仕組みは次のとおりです。

window.onscroll = function() {
  document.getElementById('fixedDiv').style.top = 
     (window.pageYOffset + window.innerHeight - 25) + 'px';
};

この JavaScript コードは、ウィンドウのスクロール イベントにバインドし、「fixedDiv」要素の最上位プロパティを調整します。この計算により、スクロール位置に関係なく、div がページの下部に残ることが保証されます。

このアプローチは、ユーザーがコンテンツをスクロールしている間画面上に保持される要素を作成する場合に特に役立ちます。フローティング メニュー、プログレス バー、その他のインタラクティブ コンポーネントのいずれの場合でも、この技術は Mobile Safari での固定位置の信頼できるソリューションを提供します。

以上がMobile Safari でスクロール ロック Div を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。