How to Implement Scroll-Locking Divs in Mobile Safari?

Scroll-Locking Div in Mobile Safari

While the "position: fixed" property for elements is a common approach for fixed positioning, it faces limitations in Mobile Safari. However, a clever solution emerged from Gmail, showcasing a floating menu bar in the message view.

This technique involves creating a div with a fixed position and utilizing JavaScript's window.onscroll event to update its top property on scroll. Here's how it works:

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

This JavaScript code binds to the window's scroll event and adjusts the top property of the "fixedDiv" element. The calculation ensures the div remains at the bottom of the page, regardless of the scroll position.

This approach proves particularly useful when creating elements that persist on the screen while the user scrolls through content. Whether for floating menus, progress bars, or other interactive components, this technique provides a reliable solution for fixed positioning in Mobile Safari.

The above is the detailed content of How to Implement Scroll-Locking Divs in Mobile Safari?. For more information, please follow other related articles on the PHP Chinese website!