How can I block scrolling until the loader displays none? - html

Question

I was wondering if there's a way to block the scroll bar until a div and its loader gets to the point of display none. I don't know if this can be done just with html or css. Any advice?
#loader {
background: #eeeeee;
bottom: 0;
height: 100%;
left: 0;
right: 0;
top: 0;
width: 100%;
display:block;
margin: 0 auto;
position: relative;
overflow: hidden;
z-index: 9999;
}
#loaderInner {
background:#eeeeee url(https://dl.dropboxusercontent.com/s/asdfghfdsas/loader.gif) center center no-repeat;
background-size: 250px 250px;
position: absolute;
height: 250px;
width: 250px;
display:block;
margin: 0 auto;
top: 50%;
left: 50%;
margin: -125px 0px 0px -125px;
}
body#layout #loader {
display:none;
overflow: scroll;
}

Answer 1

You can use some simple CSS to prevent scrolling on the page. But you would need to use JS to handle when to apply this class.
CSS
body.loading {
overflow: hidden;
}

Answer 2

Another solution is to put loader div with fixed position, so there's no need to hide the scrollbar (which can cause a strange user experience):
#loader {
position: fixed;
top: 0;
left: 0;
...
}
The div will show while scrolling
In this case you wouldn't need the "body.loading" rule.

Answer 3

The loader scrolling due to the positioning, so we can easily remove the scroll by changing the position css to position:fixed;
it will 100% work.......
#loader {
position: fixed;
background: #eeeeee;
bottom: 0;
height: 100%;
left: 0;
right: 0;
top: 0;
width: 100%;
display:block;
margin: 0 auto;
overflow: hidden;
z-index: 9999;
}

Answer 4

To me this is the best solution to delete the scroll bar while de Loader is display
html, body.loader {
overflow: hidden !important;
}