页面预加载器加载时隐藏滚动条 [英] Hide scroll bar when page preloader loads

问题描述

我想在预加载器加载时隐藏滚动条，直到预加载器消失，滚动条才会显示，这意味着用户无法在此处加载预加载器时滚动页面，而我使用的是画布作为预加载器.我尝试使用身体溢出:隐藏的和一些CSS，但在这里无法达到结果，因此我使用了画布效果作为预加载器.谁能指出我正确的方向?

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>

推荐答案

您需要在 body <上同时设置 overflow:hidden 和 height:100vh /code>和 html 标记.

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>

这篇关于页面预加载器加载时隐藏滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！