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>

回答1:

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>

回答2:

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>

来源：https://stackoverflow.com/questions/55571913/hide-scroll-bar-when-page-preloader-loads