Mobile Safari で固定位置を実現する方法: 包括的なガイド

Mobile Safari での固定位置: 総合ガイド

Mobile Safari でビューポートに対する要素の固定位置を実現するのは難しい場合があります。 「位置: 固定」は Mobile Safari では機能しないという広く信じられているにもかかわらず、Gmail は真の固定位置にほぼ近いものを提供する革新的なソリューションを導入しました。

この問題に取り組む 1 つのアプローチは、JavaScript を活用してリアルタイムのスクロール イベントを検出します。これにより、ページのスクロールに応じて要素の位置を動的に調整できます。

ページの一番下までスクロールする固定位置 div を実現するには、単純な JavaScript スクリプトを実装できます。

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

ページのオフセットと高さに基づいて「fixedDiv」要素の「top」プロパティを調整することで、div はビューポートの下部の位置を維持します。ユーザーがスクロールします。 「25」調整により、最適な表示のために div が画面の下部からわずかにオフセットされるようになります。

以上がMobile Safari で固定位置を実現する方法: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。