接入preloader后如何在页面加载时禁用滚动功能？

解决方法 #

你遇到的加载期间可滚动问题，是因为页面内容初始高度超过视口，且没有在预加载阶段限制滚动行为、预加载遮罩没有固定在视口层级导致的，按以下步骤修改即可：

• 第一步：调整预加载容器的CSS样式，保证它始终覆盖整个视口，层级高于所有页面元素

.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  /* 保留你原有其他样式 */
}

• 第二步：给body添加初始禁止滚动的规则

body {
  overflow: hidden;
}

• 第三步：修改你的预加载消失逻辑，等预加载容器完全隐藏后再恢复页面滚动权限
  将原来的代码
  $(window).on("load",function(){$(".loader-wrapper").fadeOut("slow");});
  修改为：

$(window).on("load",function(){
  $(".loader-wrapper").fadeOut("slow", function() {
    // 动画结束后再恢复滚动
    $("body").css("overflow", "auto");
  });
});

• 兜底兼容：在页面head中添加noscript标签，避免JS加载失败导致页面始终无法滚动

<noscript>
  <style>
    body { overflow: auto; }
    .loader-wrapper { display: none; }
  </style>
</noscript>

内容的提问来源于stack exchange，提问作者1ens