ArticleZip > Ios 10 Safari Prevent Scrolling Behind A Fixed Overlay And Maintain Scroll Position

Ios 10 Safari Prevent Scrolling Behind A Fixed Overlay And Maintain Scroll Position

Are you looking to prevent unwanted scrolling behind a fixed overlay on iOS 10 Safari and maintain the scroll position on your website or web app? You're in the right place! This article will show you how to achieve this with some simple coding tricks.

In iOS 10 Safari, there is a quirk that can lead to unintended scrolling behavior when you have a fixed overlay on your web page. This can be frustrating for users and may disrupt the user experience. But don't worry, there is a way to prevent this issue and keep the scroll position intact.

To prevent scrolling behind a fixed overlay in iOS 10 Safari, you can use a combination of CSS and JavaScript. Here's how you can do it:

1. The first step is to create a fixed overlay on your web page. You can do this by adding a div element with a fixed position and setting its z-index to ensure it appears on top of other content.

Html

<div id="fixedOverlay">Your fixed overlay content here</div>

2. Next, you will need to style the fixed overlay using CSS. Make sure to set the overlay's position to fixed, so it stays in place even when the user scrolls the page.

Css

#fixedOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
}

3. Now comes the crucial part - preventing the underlying content from scrolling when the fixed overlay is active. You can achieve this by adding the following JavaScript code:

Javascript

document.getElementById('fixedOverlay').addEventListener('touchmove', function(e) {
    e.preventDefault();
}, false);

By adding this JavaScript event listener to the fixed overlay element, you effectively disable scrolling behind it on iOS 10 Safari.

4. To ensure that the scroll position is maintained when the fixed overlay is closed, you can use the following JavaScript code:

Javascript

var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
document.getElementById('fixedOverlay').addEventListener('click', function() {
    document.body.scrollTop = document.documentElement.scrollTop = scrollPosition;
});

This code snippet captures the current scroll position when the fixed overlay is opened and restores it when the overlay is closed, providing a seamless user experience.

By following these steps and incorporating the provided code snippets into your web project, you can prevent scrolling behind a fixed overlay in iOS 10 Safari and maintain the scroll position for a smoother user experience. So go ahead and implement these solutions to enhance the usability of your website or web app on iOS devices.

Related posts:

×