Mobile Safari で要素をビューポートの下部に配置するにはどうすればよいですか?

Mobile Safari のビューポートの下部に要素を配置する

position:fixed を使用するなど、固定配置を実現するための従来のアプローチは、 Mobile Safari では効果がないことが証明されています。しかし、要素をビューポートに効果的に固定する Gmail のフローティング メニュー バーなど、革新的なソリューションが登場しました。

実行可能なアプローチの 1 つは、JavaScript を利用してリアルタイムのスクロール イベントを監視することです。スクロール リスナーを活用することで、開発者はユーザーのスクロール動作に基づいて要素の位置を動的に調整できます。特に、次のスクリプトを使用すると、スクロール時に特定の要素がページの下部に残るようにすることができます:

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

このコード スニペットでは、onscroll イベント ハンドラーが window オブジェクトにアタッチされています。スクロールアクティビティを継続的に監視します。スクロール イベントが発生するたびに、ID fixdiv を持つ要素の style.top プロパティが変更されます。

style.top に割り当てられる値には、現在の垂直スクロール位置 (window.pageYOffset)、ブラウザ ウィンドウが考慮されます。高さ (window.innerHeight)、および 25 ピクセルの固定オフセット。この配置戦略により、ユーザーがスクロールしても要素がページの下部に配置されたままになり、固定のビューポート相対効果が作成されます。

以上がMobile Safari で要素をビューポートの下部に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。