CODEWITHSUNDEEP
jquery
Ahmad Shah
Ahmad Shah

Reputation: 75

How to disable Scroll when Preloader is Active, with JQuery

I'm struggling to disable the Scroll while my Preloader is active.
I am using this JQuery, which is overall working fine for my preloader but unable to disable the scroll when the preloader is active.

$(document).ready(function() {
    setTimeout(function(){
        $("body").addClass("loaded");
    }, 3000);
});

I have tried

$('body').css('overflow', 'hidden');

But this disables scroll permanently when the preloader goes off. And Scroll remains enable when preloader is active.

Upvotes: 1

Views: 726

Answers (2)

Merin Ovelil
Merin Ovelil

Reputation: 377

try

$('body').css({ overflow: hidden;height: 100vh; });

Upvotes: 0

prettyInPink
prettyInPink

Reputation: 3444

You could add overflow: hidden in your css to the body and add auto when the loaded class is being added you can set it to auto.

$(document).ready(function() {
    setTimeout(function(){
        $("body").addClass("loaded");
        $('#loader').fadeOut();
    }, 3000);
});
body {
  overflow: hidden;
}

body.loaded {
  overflow: auto;
}

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.page {
  height: 10000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="loader">
  <span>loading</span>
</div>

<div class="page">
</div>

Upvotes: 1

Related Questions