CODEWITHSUNDEEP
htmlcssscrollbar
Akshay Shrivastav
Akshay Shrivastav

Reputation: 1227

Scrollbar Visible on Preloading

I am using a preloader before the website loads. also, I want to make sure that there is no scrolling happening or any scrollbar present while the contents are loaded. I'm using the below code.

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

#preloader
{
    position: fixed;
    overflow-y: hidden !important;
    -webkit-scrollbar: none;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../images/preloader.gif) center no-repeat #fff;
}

But still there is scrollbar visible and the page is scrollable.

Upvotes: 0

Views: 557

Answers (2)

bilu sau
bilu sau

Reputation: 61

enter code he


body.loading{overflow:hidden}

#preloader
{
    position: fixed;
    overflow-y: hidden !important;
    -webkit-scrollbar: none;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../images/preloader.gif) center no-repeat #fff;
}
<div id="preloader"></div>

re

Upvotes: 1

BenHerbert
BenHerbert

Reputation: 180

I would add a class to the <body> during loading and remove once completed.

body.loading {
  overflow: hidden;
}

Upvotes: 1

Related Questions