Mobile Safari で真の固定位置を実現するにはどうすればよいですか?

Mobile Safari で固定された要素の配置

Mobile Safari でビューポートを基準にして要素を固定して配置することは、繰り返しの課題でした。 Position:fixed プロパティでは望ましい効果が得られないことがよくありますが、革新的なソリューションが登場しています。

JavaScript を使用した固定位置の実装

Gmail は最近、近似値を求める手法を導入しました。固定位置。 JavaScript を通じてキャプチャされたリアルタイムのスクロール イベントを利用することで、ユーザーがスクロールするときに要素をページの下部に固定したままにすることができます。このソリューションは効果的かつ効率的です。

この手法を実装するには、次のコードを実行します。

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

このコードは、fixedDiv という名前の div 要素の最上位プロパティに、次の値に基づいて新しい値を割り当てます。ページのスクロール オフセット。スクロールに関係なくページが下部に固定されるようにします。

以上がMobile Safari で真の固定位置を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。