I have a webpage that includes two scrollable lists: one in the main body and another in a popup window. To prevent scrolling of the main body when the user scrolls inside the popup, I am using a standard solution recommended in this Stack Overflow post about preventing BODY from scrolling when a modal is opened.
However, I've encountered an issue with this solution on mobile devices, specifically when testing it on an iPhone 6 using Safari.
The problem is that touching outside the popup area causes a delay or freeze in scrolling the list within the popup for a few seconds. It seems like the scroll functionality inside the popup becomes temporarily unavailable or unresponsive.
The code snippet used on the page is as follows:
<!DOCTYPE html>
<html lang="en">
...
...
// JavaScript functions
function showPopup() {
// Functionality to toggle visibility of popup container
}
$(document).ready(function () {
// Initialization function upon document load
});
</script>
</body>
</html>
You can view a live demo of this code on CodePen here: http://codepen.io/annmirosh/pen/MJeaqO.
For a working example, visit:
If anyone has any suggestions or solutions to address the scroll freezing issue, your input would be greatly appreciated!
Thank you!