Scrollbar Visible on Preloading

Question

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.

score 1 · Accepted Answer · answered Jan 20 '19 at 15:09

1

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

body.loading {
  overflow: hidden;
}

answered Jan 20 '19 at 15:09

BenHerbert

171
2
11

good answer, but if I hardcode it into the page there will be no scrolling if javascript is disabled ... or am I missing something ? – webman Sep 01 '22 at 13:16
@webman - you are right! In fact, there are many things to consider here including accessibility. Here are some useful links that I would consider in combination with this solution, including doing it a completely different way: > https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements > https://stackoverflow.com/questions/218162/embedding-extra-styles-with-noscript – BenHerbert Aug 31 '23 at 08:22

score 1 · Answer 2 · answered Jan 21 '19 at 08:03

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

Scrollbar Visible on Preloading

2 Answers2