html - 如何让预加载器隐藏滚动条？

Question

我制作了一个预加载器，但在播放时，滚动条是可见的。如何删除它们？ JS 有 display: none; 因为 preloader 设置为 display: flex;

$(window).on('load', function() {
  $('.preloader').delay(500).fadeOut('slow', function() {
    $(this).attr('style', 'display: none !important');
  });
});

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  background-color: #fefefe;
}

<div class="preloader d-flex align-items-center justify-content-center">
  <div class="spinner-border text-danger" style="width: 10rem; height: 
             10rem;" role="status">
    <span class="sr-only">Loading...</span>
  </div>

Answer 1

您的设置中没有滚动条。您的意思是当内容大于浏览器窗口的视口(viewport)时出现的默认滚动条吗？

如果是，请将 body 元素的溢出设置为隐藏。并添加一个 jquery 行，在加载端时将溢出更改为自动。

#css
body {
  overflow:hidden;
} 
#js 
 $(window).on('load', function(){
        $('.preloader').delay(500).fadeOut('slow', function(){
            $(this).attr('style', 'display: none !important');
            /// Ad this line below
            $('body').css("overflow","auto");
        });       
    });

https://codepen.io/Cleee/pen/eYOBNPy