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 が画面の下部からわずかにオフセットされるようになります。