滚动时Div类未切换求助：intro类无法转为introalt

嘿，我帮你梳理下新手写这类滚动切换脚本最容易踩的几个坑，以及对应的解决办法：

常见的基础错误点 #

• DOM元素获取时机不对：如果你的脚本写在<head>里，或者页面还没加载完就执行，那document.querySelector('.intro')大概率会拿到null，自然没法切换类名
• 滚动事件没绑定对：很多人会忘记给window绑定scroll事件，或者绑定的方式有误
• 滚动距离判断用错属性：直接用window.scrollTop是不对的，不同浏览器要兼容pageYOffset或者document.documentElement.scrollTop
• 类名切换方式错误：直接修改className会覆盖掉元素原有的其他类，应该用classList的方法来添加/移除类

修正后的示例代码 #

你可以试试这段脚本，把它放在</body>标签的前面（或者用DOM加载完成事件包裹）：

// 等页面DOM都加载完再执行脚本
document.addEventListener('DOMContentLoaded', function() {
  // 拿到目标div
  const introElement = document.querySelector('.intro');
  
  // 给window绑定滚动监听
  window.addEventListener('scroll', function() {
    // 设置触发切换的滚动阈值，比如滚动超过200px时切换
    const triggerScroll = 200;
    // 兼容不同浏览器的滚动距离获取
    const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
    
    // 判断滚动距离，切换类名
    if (currentScroll > triggerScroll) {
      introElement.classList.remove('intro');
      introElement.classList.add('introalt');
    } else {
      // 如果需要滚动回去时恢复原类名，就保留这段
      introElement.classList.remove('introalt');
      introElement.classList.add('intro');
    }
  });
});

排查小技巧 #

如果还是没生效，可以用浏览器开发者工具（F12）排查：

1. 打开Console面板，打印introElement，看看是不是null——如果是，就是DOM加载时机的问题
2. 滚动页面时打印currentScroll，看看数值有没有变化，确认滚动事件是否正常触发
3. 检查CSS里的.introalt类，看看是不是样式优先级被其他规则覆盖了

内容的提问来源于stack exchange，提问作者Dennis de Vries