Menu
I have a form that is displayed in a popup. After loading, the background is grayed out, but the user can still scroll the background content up and down.
How do I prevent the background from scrolling?
Example here
the 'email this quote' link to the right of the pdf screenshot.
438
The key idea is to have pointer-events: none; for the body when modal is open. But the specific elements you want to be interacted with should have e.g. pointer-events: auto; . In the example you can click both buttons when dialog is hidden, but only Toggle Dialog button when dialog is shown.
Approach: To prevent body scrolling but allow overlay scrolling we have to switch the overflow to be hidden when the overlay is being shown. And while the whole page's overflow is hidden or the scroll is disabled the overflow in the y-axis of the overlay is enabled and the overflow can be scrolled.
You can use conditional CSS to hide the scroll, please follow the below steps to do so: Step 1: Use a flag (boolean variable, default value as false) inside the screen action from which you open the popup and make it true only when you click to open popup. Step 3: Make the variable as false when you close the popup.
To hide the scrollbar of the body when opening the popup
document.body.style.overflow = "hidden"; and to revert back when closing the popup
document.body.style.overflow = "visible"; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
