为什么React中用element.style.top=window.scrollY无法实现元素滚动跟随

• CSS属性缺少单位
  window.scrollY返回的是无单位的数字值，而CSS的top属性必须携带长度单位才会生效（绝大多数场景用px像素单位）。直接赋值document.querySelector(".code").style.top = window.scrollY属于无效样式设置，浏览器会直接忽略该操作。你原来的写法能生效，是因为你代码里存在笔误，input的style中top: text实际应该是top: ${scroll}px``，状态scroll更新后React会自动把带单位的值同步给DOM。
• React渲染逻辑会覆盖手动DOM修改
  React的渲染机制是状态变更触发组件重渲染时，会以你return语句里声明的属性为准，全量同步真实DOM的属性。你手动修改DOM的top属于脱离React管控的操作，只要组件后续因为任意原因触发重渲染（比如其他状态更新、父组件重渲染），React就会用你在style里声明的值覆盖掉你手动修改的结果，导致修改失效。

现有代码的其他问题 #

你现在将addEventListener直接写在组件函数顶层，每次组件重渲染都会新增一个重复的滚动监听事件，会造成内存泄漏。建议将监听逻辑移到useEffect钩子中，并在钩子的清理函数里移除滚动监听。另外你写的typeof document.querySelector(".code") === "undefined"判断逻辑有误，querySelector找不到对应元素时返回的是null而非undefined，这个判断分支永远不会触发。

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