页面预加载器加载时隐藏滚动条

Question

我想在预加载器加载时隐藏滚动条，直到预加载器消失才显示滚动条，这意味着用户在预加载器加载时无法滚动页面，这里我使用画布作为预加载器。 我尝试使用身体溢出：隐藏的和一些CSS，但在这里无法达到结果，因此我将画布效果用作预加载器。 有人能指出我正确的方向吗？

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

Answer 1

如果适用，请尝试以下代码。 我在StackOverflow上找到了这个。 来源：预先加载网页时禁用滚动

Js代码

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

CSS代码

  .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);}
    }

码

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

Answer 2

您需要在body和html标签上设置overflow: hidden和height: 100vh 。

 /* 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 个解决方案

解决方案1
1 2019-04-08 11:13:14

解决方案2
0 已采纳 2019-04-08 11:29:44

页面预加载器加载时隐藏滚动条

问题描述

2 个解决方案

解决方案1 1 2019-04-08 11:13:14

解决方案2 0 已采纳 2019-04-08 11:29:44

解决方案1
1 2019-04-08 11:13:14

解决方案2
0 已采纳 2019-04-08 11:29:44