如何通过onscroll事件使用JavaScript修改CSS属性（以背景颜色为例）

没问题，这其实是个很常见的需求，我来帮你捋清楚怎么实现，顺便修正下你代码里的小问题~

首先得指出你代码里的关键错误：你在判断条件里用了赋值运算符=，而不是比较运算符==或===，这会导致不管滚动到哪里，都会强制把document.body.scrollTop设为30，然后直接执行if块里的代码，逻辑完全跑偏了。另外还要注意，不同浏览器获取滚动距离的方式有差异，有些浏览器是从document.documentElement.scrollTop取值，所以最好做下兼容。

下面是修正后的完整示例代码：

window.onscroll = () => {
  // 兼容不同浏览器，获取正确的滚动距离
  const scrollDistance = document.body.scrollTop || document.documentElement.scrollTop;
  
  // 当滚动距离超过30px时切换背景色，用>=更符合实际场景
  if (scrollDistance >= 30) {
    document.body.style.backgroundColor = "grey";
  } else {
    document.body.style.backgroundColor = "white";
  }
};

再补充几个小细节：

• 用||做兼容是因为如果document.body.scrollTop为0（未滚动时），会自动取document.documentElement.scrollTop的值，覆盖大部分浏览器的情况
• 把判断条件改成>=30比===30更合理，毕竟滚动是连续行为，刚好滚动到30px的瞬间很难捕捉到，通常我们想要的是滚动超过某个阈值就触发样式变化
• 如果要修改其他CSS属性（比如导航栏的透明度、字体颜色），逻辑完全一致，只需要替换document.body.style.xxx中的属性名和对应值即可

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