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

Mobile Safari での位置の固定

Mobile Safari でビューポートに対して要素を固定して配置することは、長年の課題でした。このブラウザでは、position:fixed を使用する従来の方法が失敗することがよくあります。

代替ソリューション

Gmail は最近、固定位置の近似値を提供する革新的なソリューションを導入しました。秘訣は、スクロール時に要素の上部の位置を動的に調整することです。

JavaScript の実装

この代替方法は、わずか数行の JavaScript で実装できます。

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

このコードでは、onscroll イベント リスナーが要素の最上位の CSS プロパティを更新します。 id = "固定ディビジョン"。使用される式により、25 ピクセルの小さなオフセットで要素が常にビューポートの下部に配置されるようになります。

スクロール時に要素の位置を常に調整することで、このコードはアンカーされたままの固定位置を効果的にシミュレートします。 Mobile Safari のビューポートに移動します。

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