I'm constructing a preloader for my website. before the site is loaded there is a plain white div on top of everything, that i later fade out to show the content.

i make this div height 100%, but the problem is that this div then gets a nasty scroll - same length as my normal website content is, and im possible to scroll a tall white div while it's loading.

is there any way to make my loading screen div as big as the "viewport" and not having it's as tall as my full website is? and would make it not scrollable?

do i need to hide all my content that is under the loading screen for this to work?

I'm constructing a preloader for my website. before the site is loaded there is a plain white div on top of everything, that i later fade out to show the content.

i make this div height 100%, but the problem is that this div then gets a nasty scroll - same length as my normal website content is, and im possible to scroll a tall white div while it's loading.

is there any way to make my loading screen div as big as the "viewport" and not having it's as tall as my full website is? and would make it not scrollable?

do i need to hide all my content that is under the loading screen for this to work?

• javascript
• html
• css

Share Improve this question Follow asked Oct 13, 2016 at 22:59 PeterPeter 3111 silver badge55 bronze badges 5

• Use position: absolute; top: 0; right: 0; bottom: 0; left: 0;. You may need to add html, body { height: 100%; } – Phil Commented Oct 13, 2016 at 23:01
• Please provide your code.... – Xdrone Commented Oct 13, 2016 at 23:05
• it seems like whatever i do, my website will always be under this div, and therefor create a scroll for the whole site. i can probably make the white div as big as my viewport, but i dont think i can bypass the scroll as long as i dont hide all my content that is under it, right? since there is content that goes beyond the viewpoint it will always create a scroll? – Peter Commented Oct 13, 2016 at 23:29
• You can achieve the effect you want, but the reason you're getting answers that don't meet your requirements is that you haven't provided a Minimal, Complete, and Verifiable example that answerers can test and prove correctness against. – Alohci Commented Oct 13, 2016 at 23:51
• i know i didnt provide the code, it's just too much and very messy at the moment. i just wanted any thoughts i could get without having to provide it. the example i gave is a very simplified version and not even close to how my code looks. – Peter Commented Oct 13, 2016 at 23:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

As Phil mentioned, you could use position absolute (or position fixed). This will take it out of the flow of the rest of the document and won't affect the stuff around it.

.cover {
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

I just came up with a solution to my problem, if anyone else will find this thread with similiar problems.

i put the body to overflow-y: hidden to remove the scrolling for the site. then i use a jquery script that will change the value of overflow-y: hidden to visible when the page has fully loaded (the same script which removes the loading screen).

$('body').css({"overflow-y":"visible"});

i now have the site locked with the loading screen without a scroll, and once the page is loaded the scroll appears as the loading screen fades and makes the site scrollable as i wanted it.

thanks for taking your time to answer though!

position:absolute; left:0; top:0; width:100%; height:100%;

Same but different