Question

我做了一个预加载器，但是在播放时，滚动条可见。如何删除它们？ JS具有display: none;，因为预加载器设置为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

您的设置中没有滚动条。您的意思是默认滚动条，当内容较大时显示在浏览器窗口的视口中吗？

如果是，请将body元素的溢出设置为隐藏。并添加一条jquery行，将在加载侧面时将溢出更改为auto。

#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

Answer 2

将位置添加为绝对

.preloader {位置：绝对；最高：0;左：0；正确：0；底部：0 z-index：10002； background-color：#fefefe; }

并尝试。那必须解决这个问题

如何使预加载器隐藏滚动条？

2 个答案: