Is there a way to hide the scroll bar while the preloader is loading on a webpage? I want to prevent users from scrolling until the preloader disappears. I have tried using CSS and setting the body overflow to hidden, but it's not working as expected. The preloader effect I am using involves canvas. Can someone guide me in the right direction?
/* Preloader Effect */
var noise = function(){
//const noise = () => {
var canvas, ctx;
var wWidth, wHeight;
var noiseData = [];
var frame = 0;
var loopTimeout;
// Create Noise
const createNoise = function() {
const idata = ctx.createImageData(wWidth, wHeight);
const buffer32 = new Uint32Array(idata.data.buffer);
const len = buffer32.length;
for (var i = 0; i < len; i++) {
if (Math.random() < 0.5) {
buffer32[i] = 0xff000000;
}
}
noiseData.push(idata);
};
// Play Noise
const paintNoise = function() {
if (frame === 9) {
frame = 0;
} else {
frame++;
}
ctx.putImageData(noiseData[frame], 0, 0);
};
// Loop
const loop = function() {
paintNoise(frame);
loopTimeout = window.setTimeout(function() {
window.requestAnimationFrame(loop);
}, (1000 / 25));
};
// Setup
const setup = function() {
wWidth = window.innerWidth;
wHeight = window.innerHeight;
canvas.width = wWidth;
canvas.height = wHeight;
for (var i = 0; i < 10; i++) {
createNoise();
}
loop();
};
// Reset
var resizeThrottle;
const reset = function() {
window.addEventListener('resize', function() {
window.clearTimeout(resizeThrottle);
resizeThrottle = window.setTimeout(function() {
window.clearTimeout(loopTimeout);
setup();
}, 200);
}, false);
};
// Init
const init = (function() {
canvas = document.getElementById('noise');
ctx = canvas.getContext('2d');
setup();
})();
};
noise();
$(document).ready(function(){
$('body').css({
overflow: 'hidden'
});
setTimeout(function(){
$('#preloader').fadeOut('slow', function(){
$('body').css({
overflow: 'auto'
});
});
}, 5000);
});#preloader {
position: fixed;
height: 100vh;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
/* change if the mask should have another color then white */
z-index: 10000;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="preloader">
<canvas id="noise" class="noise"></canvas>
</div>