In this tutorial, I will show you how to disable the background page scrolling while the Elementor lightbox is opened.
This leads to a better UX, and allows a little bit more space for the user to view the images with, as it removes the scroll bar on the right.
By default, when the lightbox is opened, you can still scroll up and down the page using the mousewheel. This tutorial shows you how to disable the page scrolling.
Here is a live example:
Let's get started!
First, let's add this Elementor lightbox without page scrolling code
Add this CSS somewhere global, so that it is applied to every page of your website. This could be your child theme's styles.css file, or Elementor global CSS, or the theme customizer > Additional CSS area.
<script> /* Please login to get the code * The code will be for the Elementor Lightbox Disable Page Scrolling When Opened tutorial * Found at this URL https://element.how/elementor-lightbox-disable-page-scrolling/ */ </script>
Finally, enjoy your new Elementor lightbox with no page scrolling in the background!
That's right! You only need this short snippet of CSS to make it all work.
Hope you enjoy!
Cheers!