I have a pop up on my website, it can go from hidden, to minimized, to fullscreen states, when on fullscreen, i obviously want to block the scroll of the page behind. So i add and remove the noscroll class when on fullscreen :
.noscroll {
height: 100%;
overflow: 100vh; // fallback for browser not support svh
overflow: 100svh;
}
It works as sa charm on desktop but on mobile-safari, when the noscroll class is added, the body’s scroll position gets resetted to the top.
I’ve tried online the solutions including :
- adding a position: fixed to the noscroll class -> not working in my case;
- saving the scrollPosition to add it again once the popup is removed -> like on twitter or instagram, when we reach the top of the page, the app searches for new content, this is triggered everytime i open the popup, i need to avoid that and resetting the scroll position after it happened doesn’t solves my problem
Isn’t there a way to simply prevent the body from jumping up while still preventing it from scrolling !?
user23873005 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.