Disable scrolling on preloader

Question

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";
})

Ah sorry. No, it didn´t because the user does not click any button to see the preloader. I have done something with the button click on my full-screen menu (it's kind of the same like you suggested but in this case, it needs to show up immediately and display none if loading is finished. I think I have to accept the problem. — Louis, Jan 16 '22 at 09:54
I add the `button` for showing the purpose that is does disable scrolling, but I just updated the code that it will disable the scroll once loading. You are not able to scroll any more once document loaded. Check if it works — James, Jan 16 '22 at 16:15
Also, I will be appreciated if you could accept and upvote my answer:) — James, Jan 16 '22 at 16:16
I would accept, but sadly it is not a solution if the whole page is not scrollable after the preloader. I am sorry. — Louis, Jan 17 '22 at 15:22
I think it is not hard to fix if you want to your whole page become not scrollable after the preloader. In my code, I give you an example of how you could disable the preloader. Note that I am not giving you the example! Not really deal with your code. The reason I doesn't do that is because I don't have your full code. In your code, the preloader will be display:none once page loaded so you won't disable the scroll event. If could change it if you want, but I don't know when you want to make preloader to display: block and let disable user to scroll — James, Jan 17 '22 at 16:46

score 0 · Answer 1 · answered Jan 14 '22 at 22:04

0

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

answered Jan 14 '22 at 22:04

Vadim Liakhovich

116
6

I tried but then the body is not scrollable if it is finished loading. Or i did something wrong – Louis Jan 14 '22 at 22:07
@Louis, you need to set `document.body.style.overflow = 'hidden'` on loading start and then set `document.body.style.overflow = ''` on loading end – Vadim Liakhovich Jan 14 '22 at 22:14
Ah okay but what do i need to set before these statements? Set into the var loader? – Louis Jan 14 '22 at 22:22
@Louis, well, I am not sure I understand the last comment, but I assume loading is shown right away, so after `var loader = document.getElementById("preloader");` you put `document.body.style.overflow = 'hidden' ;`. And then inside load function you put `document.body.style.overflow = '';` right after `loader.style.display = "none";` for example – Vadim Liakhovich Jan 14 '22 at 22:26
I understand your point but sadly it does not work. I´ve set it like you said var loader = document.getElementById("preloader"); document.body.style.overflow = 'hidden'; window.addEventListener("load", function(){ loader.style.display = "none"; document.body.style.overflow = ''; }) – Louis Jan 14 '22 at 22:33
@Louis, very strange, `document.body.style.overflow = 'hidden';` disables page scroll. Maybe you can check if actually it is not body that gets scroll but other element? If so, then you need to set this to that scrolling element – Vadim Liakhovich Jan 14 '22 at 22:37

James · Answer 2 · 2022-01-16T16:16:54.253

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(){ 
      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>

Disable scrolling on preloader

2 Answers2