页面刷新时检测滚动位置 实现导航栏颜色正确切换

这个场景我太熟悉了！很多人都会忽略页面刷新时的初始滚动状态，导致样式和实际位置不匹配。核心思路就是在页面加载完成后，主动检查一次当前的滚动高度，而不是只依赖滚动事件触发逻辑。下面给你几种可行的实现方案：

方案1：用DOMContentLoaded事件触发检查 #

这个事件会在DOM结构完全加载好后立刻触发（不用等图片、视频这些资源加载完毕），是最常用的场景：

// 默认先执行初始状态的函数
scrolllessthan200func();

// 页面DOM加载完成后，主动检查初始滚动位置
document.addEventListener('DOMContentLoaded', function() {
  // 兼容不同浏览器的滚动高度获取方式
  const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
  if (currentScroll > 200) {
    callfunc();
  }
});

// 保留你原来的滚动事件监听
window.addEventListener('scroll', function() {
  const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
  if (currentScroll > 200) {
    callfunc();
  } else {
    scrolllessthan200func();
  }
});

方案2：直接把检查代码放在脚本末尾 #

如果你是把JS脚本放在</body>标签的前面（这时候DOM已经加载完成了），可以省去事件监听，直接写检查逻辑：

// 默认执行初始函数
scrolllessthan200func();

// 直接检查当前滚动高度
const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 200) {
  callfunc();
}

// 原来的滚动事件监听保持不变
window.addEventListener('scroll', function() {
  const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
  if (currentScroll > 200) {
    callfunc();
  } else {
    scrolllessthan200func();
  }
});

方案3：封装复用函数（强烈推荐） #

为了避免重复写判断逻辑，把检查逻辑封装成一个函数，既在页面加载时调用，也在滚动事件里调用，代码更简洁易维护：

// 封装滚动位置检查函数
function handleScrollPosition() {
  const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
  if (currentScroll > 200) {
    callfunc();
  } else {
    scrolllessthan200func();
  }
}

// 页面加载完成后执行一次
document.addEventListener('DOMContentLoaded', handleScrollPosition);

// 滚动时实时执行
window.addEventListener('scroll', handleScrollPosition);

小补充 #

• document.documentElement.scrollTop和document.body.scrollTop结合写是为了兼容所有浏览器（不同浏览器对滚动高度的挂载对象不一样）。
• 如果你的页面有大量图片等资源，想要等所有资源都加载完再检查，可以把DOMContentLoaded换成window.load事件，不过一般DOMContentLoaded已经足够满足需求了。

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