预加载屏如何单独隐藏y轴滚动条且不影响全站滚动？

算力阿峰

2026-11-7

预加载屏右侧多余滚动条的解决方案

问题核心

你之前在#preloader上添加overflow-y: hidden没有生效，本质是你看到的右侧滚动条根本不是预加载容器生成的：
#preloader是固定定位、铺满整个视口的元素，自身内容没有溢出的话，内部不会生成任何滚动条。你在截图里看到的贴在视口最右侧的滚动条，是页面加载初期，根元素（<html>/<body>）因为临时的内容高度差触发的全局滚动条——这个滚动条和preloader容器是平级的，你在preloader的样式上设置再多overflow规则，也管不到根元素的滚动行为。
直接给全局*选择器加overflow-y: hidden的方案不可行，是因为这个规则会把页面所有元素的内部滚动能力全部废掉，后续需要滚动的长列表、弹窗组件都会直接失效，完全不符合需求。

正确配置方法

不需要改动原有全局样式，只要在预加载展示的时间段，临时锁住页面根元素的滚动状态，等预加载淡出完成后再解锁，就能实现“仅预加载阶段隐藏y轴滚动条、不影响后续站点正常滚动”的效果：

补充CSS规则：在现有样式表中新增类选择器规则，不要修改原有全局*选择器的内容：

/* 仅预加载激活状态下，隐藏body的y轴滚动条 */
body.preloader-active {
  overflow-y: hidden;
}

修改预加载的JavaScript逻辑：在原有的jQuery代码基础上，增加状态切换的逻辑：

$(window).on('DOMContentLoaded', function() {
  const $preloader = $('#preloader');
  if ($preloader.length) {
    // 预加载展示阶段立刻给body加锁定类，从源头消除右侧滚动条
    $('body').addClass('preloader-active');
    // 预加载淡出动画完全结束后，解除滚动锁定，恢复页面正常滚动
    $preloader.delay(2000).fadeOut('slow', function() {
      $('body').removeClass('preloader-active');
    });
  }
});