如何在加载期间禁用滚动？

Question

我正在我的个人网站上工作并且已经实现了预加载器。在我的网站上添加第二个 div 后，我注意到我可以在页面加载期间滚动。我不知道你怎么看，但我觉得那丑陋而令人不安。

这是一个简短的视频。（我使用 chromeOS）

Video

我真的找不到任何关于这个的东西，因为我想我是唯一遇到这个问题的人。不过我不确定。

我也用了$(window).on("load",function(){$(".loader-wrapper").fadeOut("slow");});

这是代码 (Github Repo) 不管怎样，我只有这些了。

提前致谢。

Answer 1

您可以默认添加一个 class 到您的正文 class 应该如下所示。

// CSS
.no-scroll {
   overflow: hidden;
}

<body class="no-scroll">

脚本完成或函数完成后，您只需调用

document.body.classList.remove('no-scroll');

确保在页面末尾添加以下部分。

<script type="text/javascript">
(function(){
   function onReady() {
     document.body.classList.remove('no-scroll');
   }
   
   if ( document.readyState === 'complete' ) {
      onReady();
   } else {
      document.addEventListener('DOMContentLoaded', onReady);
   }
})();
</script>

或者您可以使用 jQuery

// Make sure this code is the last piece of code in your HTML.
$(window).on("load", function() {
   document.body.classList.remove('no-scroll');
});

PS：除此之外，请考虑当某人未启用 JavScript 时的不同场景，因此您添加了默认行为。看看 <noscript> 标签。

如何在加载期间禁用滚动？

How To Disable Scrolling During Loading?

html

javascript

css

jquery

preloader