如何在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 事件偵錯聽器使用id="fixedDiv" 更新元素的頂部CSS 屬性。使用的公式確保元素始終位於視窗的底部，並有 25 像素的小偏移。

透過不斷調整元素在捲動上的位置，此程式碼有效地模擬了保持錨定的固定位置到 Mobile Safari 中的視窗。

以上是如何在Mobile Safari中實現固定位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！