页面刷新后仅Stars元素滚动生效，其他元素失效的问题求助

核心原因：DOM加载时机不匹配 #

你遇到的问题本质是JavaScript代码执行时，目标DOM元素还未完成加载：

• querySelector返回的是静态节点，一旦执行时元素未加载就会得到null，后续的样式修改逻辑因为if (xxx !== null)的判断被直接跳过；
• 而getElementsByClassName返回的是动态HTMLCollection，它会自动同步DOM的变化，页面加载完成后能自动获取到stars元素，所以滚动时stars的效果正常。

修改代码保存后（比如依赖热模块替换工具），此时DOM已经完全加载，重新执行的JS能正确获取到所有元素，所以所有滚动效果都恢复正常。

验证与解决方法 #

1. 确保JS在DOM加载完成后执行 #

把代码放到DOMContentLoaded事件回调里，或者将<script>标签放在</body>闭合前，保证元素加载完成后再执行选择器逻辑：

document.addEventListener('DOMContentLoaded', () => {
  let moon = document.querySelector(".moon") as HTMLElement | null;
  let stars = document.getElementsByClassName("stars") as HTMLCollectionOf<HTMLElement>;
  let backMountains = document.querySelector(".backMountains") as HTMLElement | null;
  let frontMountains = document.querySelector(".frontMountains") as HTMLElement | null;
  let heroText = document.querySelector(".heroText") as HTMLElement | null;
  let heroBtn = document.querySelector(".heroBtn") as HTMLElement | null;
  let navBar = document.querySelector(".navBar") as HTMLElement | null;

  window.addEventListener("scroll", () => {
    let value = window.scrollY;

    for (let i = 0; i < stars.length; i++) {
      stars[i].style.left = value * 0.25 + "px";
    }
    moon?.style.top = `${value * 1.05}px`;
    backMountains?.style.top = `${value * 0.5}px`;
    frontMountains?.style.top = `${value * 0}px`;
    heroText?.style.marginRight = `${value * 5}px`;
    heroText?.style.marginTop = `${value * 1.5}px`;
    heroBtn?.style.marginTop = `${value * 1.5}px`;
    navBar?.style.marginTop = `${value * 0.5}px`;
  });
});

注：这里用可选链?.简化了null判断逻辑，效果和原代码一致

2. 排查CSS样式冲突（次要可能） #

如果上述方法无效，检查目标元素的CSS是否有!important标记或者更高优先级的规则，覆盖了JS设置的行内样式。比如：

.moon {
  top: 20px !important; /* 会直接覆盖JS设置的行内样式 */
}

这种情况下，要么移除!important，要么用JS强制指定样式优先级：

moon?.style.setProperty('top', `${value * 1.05}px`, 'important');

3. 快速调试验证 #

刷新页面后，打开浏览器控制台输入console.log(moon, backMountains)，如果输出null，就坐实了DOM加载时机的问题。

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