CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Husna
Husna

Reputation: 1386

Hide scroll bar when page preloader loads

I want to hide scroll bar while preloader is loading the scroll bar will not show until unless preloader disappears which means the user can't able to scroll the page while preloader is loading here I'm using canvas as a preloader. I tried by using body overflow: hidden and some CSS also but unable to achieve the result here I used canvas effect as a preloader. Can anyone point me in the right direction what I'm doing wrong?

/* 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>

Upvotes: 1

Views: 2872

Answers (3)

Shaikh Abu Amer
Shaikh Abu Amer

Reputation: 1

Set the position of body as fixed and when the page is loaded, remove that.

document.body.style.position = "fixed";
window.addEventListener("load", () => {
    document.body.style.position = "";
    document.querySelector(".preloader").style.display = "none";
});

Upvotes: 0

thibpat
thibpat

Reputation: 786

You need to set overflow: hidden and height: 100vh both on the body and the html tags.

/* 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, html').css({
  overflow: 'hidden',
  height: '100vh'
});
setTimeout(function(){
  $('#preloader').fadeOut('slow', function(){
    $('body, html').css({
      overflow: 'auto',
      height: '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>

Upvotes: 0

Salman Khan
Salman Khan

Reputation: 188

Try these Codes, If it works for you. I found this on StackOverflow. Source: Disable scrolling when preload a web page

Js Code

$(window).load(function() {
      $(".preloader").fadeOut(1000, function() {
          $('body').removeClass('loading');
      });
    });

Css Code

  .loading {
      overflow: hidden;
      height: 100vh;
    }

    .preloader {
      background: #fff;
      position: fixed;
      text-align: center;
      bottom: 0;
      right: 0;
      left: 0;
      top: 0;
    }

    .preloader4 {
       position: absolute;
       margin: -17px 0 0 -17px;
       left: 50%;
       top: 50%;
       width:35px;
       height:35px;
       padding: 0px;
       border-radius:100%;
       border:2px solid;
       border-top-color:rgba(0,0,0, 0.65);
       border-bottom-color:rgba(0,0,0, 0.15);
       border-left-color:rgba(0,0,0, 0.65);
       border-right-color:rgba(0,0,0, 0.15);
       -webkit-animation: preloader4 0.8s linear infinite;
       animation: preloader4 0.8s linear infinite;
    }
    @keyframes preloader4 {
       from {transform: rotate(0deg);}
       to {transform: rotate(360deg);}
    }
    @-webkit-keyframes preloader4 {
       from {-webkit-transform: rotate(0deg);}
       to {-webkit-transform: rotate(360deg);}
    }

Code

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <body class="loading">
      <div class="preloader">
        <div class="preloader4"></div>
      </div>
//Code

    </body>

Upvotes: 1

Related Questions