0

i want hide scroll bar when my page loads

and here are my javascript

<script type='text/javascript'>
//paste this code under the head tag or in a separate js file.
  // Wait for window load
  $(window).load(function() {
    // Animate loader off screen
    $(&quot;.se-pre-con&quot;).fadeOut(&quot;slow&quot;);;
  });
</script>

(edit:) i forget to include css... sorry

<!-- CSS Loading Start -->
.no-js #loader { display: none; background-color:#0c0c0c; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; background-color:rgb(12,12,12); }
.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(https://cdn.discordapp.com/attachments/724396372891009086/724725986326741032/Loading_Bar_Animation.gif) center no-repeat #000000;
}
<!-- CSS Loading End -->

2 Answers2

2
<body class="noscroll">...</body>

// css
body.noscroll { overflow: hidden }

// when you need scroll, just remove class from body and scroll return
 $("body").removeClass('noscroll');
Sasha Salyha
  • 61
  • 2
  • i did what you say but... its not working. i think its because the template (i use blogger). –  Jun 23 '20 at 20:10
  • can anyone check my template...? https://pastebin.com/raw/niaadEkP i don't know how to put the code... (CTRL + F "noscroll") –  Jun 23 '20 at 20:14
1

If you want to hide it at very beginning then use css

body {
  overflow: hidden;
}

Put this when you want to hide on some event

document.body.style.overflow = 'hidden';

When you want to show put this

document.body.style.overflow = 'visible';

If you want to make it visible when page loads then put css and use overflow:visible on page load

Karan Goyal
  • 447
  • 5
  • 10
  • yes i want hide from beginning i added this overflow: hidden; to .js #loader AND .se-pre-con but the scroll bar is still there... –  Jun 23 '20 at 19:53
  • Add body { overflow: hidden; } to css file and then document.body.style.overflow = 'visible'; to $(window).load(function() – Karan Goyal Jun 23 '20 at 19:55
  • Scrollbar is a body element not a document element – Karan Goyal Jun 23 '20 at 19:56