如何在 Mobile Safari 中實現滾動鎖定 Div？

Mobile Safari 中的滾動鎖定Div

雖然元素的「position:fixed」屬性是固定定位的常用方法，但它在Mobile Safari 中面臨限制。然而，Gmail 出現了一個聰明的解決方案，在訊息視圖中展示了一個浮動選單列。

此技術涉及建立一個位置固定的 div，並利用 JavaScript 的 window.onscroll 事件來更新其捲動時的 top 屬性。它的工作原理如下：

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

此 JavaScript 程式碼綁定到視窗的捲動事件並調整「fixedDiv」元素的 top 屬性。此計算可確保 div 保持在頁面底部，無論捲動位置為何。

當建立使用者捲動內容時保留在螢幕上的元素時，這種方法特別有用。無論是浮動選單、進度條或其他互動元件，該技術都為 Mobile Safari 中的固定定位提供了可靠的解決方案。

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