Disable scrolling on preloader-CodePudding

is there a way to disable the user to scroll if the preloader is active? So to disable the body from scrolling.

It would be amazing if you could help me.

Here is my code atm:

<div id="preloader"></div>

#preloader{
    background: #000 url(images/preloader.gif) no-repeat center center ;
    background-size: 15%;
    height: 100%;
    width: 100vw;
    z-index: 100000;
    position: fixed;
}

var loader = document.getElementById("preloader");

window.addEventListener("load", function(){
    loader.style.display = "none";
})

CodePudding user response：

If you need to disable full page scroll you can set overflow: hidden to the body and then return it back once loading completed

CodePudding user response：

I don't think you could really technically disable/cancel the scroll, but you could try to change how scroll will act.

Here is an example I made that could avoid you from scrolling when user click the button and preloader become active.

var loader = document.getElementById("preloader");

window.addEventListener("load", function(){
    loader.style.display = "none";
    //Enable it 
     window.onscroll = function(){};
})

document.querySelector('button').onclick = function(){
   loader.style.display = "revert";
   window.onscroll = function(){window.scrollTo(0,0)};
}

#preloader{
   /* background: #000 url(images/preloader.gif) no-repeat center center ;*/
    background-size: 15%;
    width:200px
    
    z-index: 100000;
    position: fixed;
}

<div id="preloader">Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] It features questions and answers on a wide range of topics in computer programming.[9][10][11] It was created to be a more open alternative to earlier question and answer websites such as Experts-Exchange. Stack Overflow was sold to Prosus, a Netherlands-based consumer internet conglomerate, on 2 June 2021 for $1.8 billion.[12]

The website serves as a platform for users to ask and answer questions, and, through membership and active participation, to vote questions and answers up or down similar to Reddit and edit questions and answers in a fashion similar to a wiki.[13] Users of Stack Overflow can earn reputation points and "badges"; for example, a person is awarded 10 reputation points for receiving an "up" vote on a question or an answer to a question,[14] and can receive badges for their valued contributions,[15] which represents a gamification of the traditional Q&A website. Users unlock new privileges with an increase in reputation like the ability to vote, comment, and even edit other people's posts.[16]

As of March 2021 Stack Overflow has over 14 million registered users,[17] and has received over 21 million questions and 31 million answers.[18] Based on the type of tags assigned to questions, the top eight most discussed topics on the site are: JavaScript, Java, C#, PHP, Android, Python, jQuery, and HTML.[19] Stack Overflow also has a Jobs section to assist developers in finding their next opportunity.[20] For employers, Stack Overflow provides tools to brand their business, advertise their openings on the site, and source candidates from Stack Overflow's database of developers who are open to being contacted</div>
<button>Click</button>