How do I prevent my scrollbar from working on exit popup?
772
What I would like to do is lock the screen of my website, but not all of it, just the back part, this means that when my modal is opened, the screen behind my open modal cannot be moved with the scrollbar.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<button id="fire-popup">Popup Trigger</button>
<div id="popup-container" class="full-layer">
<div id="popup-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis non massa vitae mollis. Suspendisse at pellentesque lacus. Nunc ante quam, congue sed egestas quis, porta sed metus.
</div>
<div id="popup-overlay" class="full-layer"></div>
</div>
2. Adding .css()to hide scroll directly to the element:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<button id="fire-popup">Popup Trigger</button>
<div id="popup-container" class="full-layer">
<div id="popup-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis non massa vitae mollis. Suspendisse at pellentesque lacus. Nunc ante quam, congue sed egestas quis, porta sed metus.
</div>
<div id="popup-overlay" class="full-layer"></div>
</div>
Well, basically this is the concept:
Now there are two ways to do this.
✦ (new edit) Creating a class with the desired style to block page scrolling and toggle this class when needed (which is best practice):
✦ Or adding the desired style directly to the element with
.css()
1. Creating a handler class (new edition):
2. Adding
.css()
to hide scroll directly to the element:Use this code to block scrolling at will