I have a lightbox type pop-ups on some of my scenes.
I’d like to disable the scrolling of body when those lightboxes are open and let the body scroll again when they’re closed.
So, I found this on Stack Overflow:
body.noscroll
{
position: fixed;
overflow-y: scroll;
width: 100%;
}
$('body').addClass('noscroll');
$('body').removeClass('noscroll');
I implemented that by adding the body.noscroll thing in the <head>
and added 2 JavaScript functions: setClass
and removeClass
and triggered them when required. That didn’t work for me as I got $ isn't defined
in console.
So, I looked for pure JS to apply and remove class and found this:
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.add("mystyle");
}
Now, if I want to use it, I’d prefer to use class to select elements (if possible in this case as I need to select the whole body except for the lightbox) based on this discussion. Even if that’s not an option, and I have to go by using ID, I’m not sure how to add ID to the body.
What can be done?