CSS动画完成前禁止页面滚动及getElementById返回null问题排查

问题根源 #

你的JS代码在DOM尚未完成解析时就执行了document.getElementById('loadingScreen')——此时浏览器还没渲染出这个元素，所以返回null。

解决方案 #

以下三种方法都能解决这个问题，选适合你项目的即可：

1. 把JS代码移到body末尾

让浏览器先解析完所有DOM元素再执行JS，直接把脚本放在</body>标签前：

<body>
  <div id="loadingScreen" class="loadingScreen fade-out d-flex justify-content-center align-items-center">
    <div class="spinner spinner-grow" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
  <!-- 页面其他内容 -->
  <script>
    const body = document.getElementsByTagName('body');
    const loadingScreen = document.getElementById('loadingScreen');

    window.addEventListener('load', (e) => {
        setTimeout(() => {
        body[0].style.setProperty('overflow-y', 'visible');
        loadingScreen.remove();
        }, 6000);
    });
  </script>
</body>

2. 用DOMContentLoaded包裹元素获取逻辑

通过DOMContentLoaded事件确保DOM加载完成后再获取元素：

document.addEventListener('DOMContentLoaded', () => {
  const body = document.getElementsByTagName('body');
  const loadingScreen = document.getElementById('loadingScreen');

  window.addEventListener('load', (e) => {
      setTimeout(() => {
      body[0].style.setProperty('overflow-y', 'visible');
      loadingScreen.remove();
      }, 6000);
  });
});

3. 给script标签加defer属性

如果你的JS是外部文件或放在<head>里，添加defer属性让脚本在DOM解析完成后执行：

<head>
  <!-- 其他资源（比如Bootstrap CSS） -->
  <script src="your-script.js" defer></script>
</head>

额外提示：如果fade-out动画未生效，要确认Bootstrap动画类是否正确引入，或自定义对应的CSS过渡/动画规则。核心问题解决后，加载屏的移除逻辑就能正常执行了。

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