时间戳

首页 > 解决方案 > 使用 JQuery 禁用页面滚动

jquery - 使用 JQuery 禁用页面滚动

问题描述

我正在尝试构建一个覆盖页面的预加载器 DIV，直到页面加载。但是，当预加载器 DIV 可见时，我无法设法禁用页面滚动：

$('body').css('overflow-y','hidden');
$('body').css('position','fixed');

$(window).on("load", function() {
  $('#preloader').delay(2000).fadeOut('slow');
  $('body').css('overflow-y','auto');
  $('body').css('position','relative');
})

标签： jquerycssscroll

解决方案

据我了解，您需要一个加载器才能出现在页面上，直到相应页面完全加载为止。

为此，解决方案是：在开始标记后添加以下 HTML。此加载器 div 将在页面加载时显示加载图像。

<div class="loader"></div>

使用以下 CSS 在 loader div 上显示加载图像，使加载图像位于页面中心，并以透明的白色背景覆盖整个屏幕。

.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/pageLoader.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}

首先包括 jQuery 库。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script type="text/javascript">
$(window).load(function() {$(".loader").fadeOut("slow");});
</script>

此外，请确保整个 JavaScript 代码已放置在标记下。

推荐阅读