页面滚动时仅在370px-410px区间显示Button的问题求助

现有代码存在的问题 #

• 条件判断逻辑错误：混用||（或）运算符判断两个不同节点的滚动属性，不同浏览器滚动距离分别挂载在document.documentElement和document.body上，你的判断逻辑会导致无论在哪种浏览器下，总有一半条件永远不成立，无法进入显示按钮的分支。
• 事件绑定逻辑错误：useEffect依赖项设置为状态Btn，每次按钮显隐状态变化都会重新绑定一次scroll事件，会出现重复绑定、回调多次触发的问题，严重影响性能。
• 未做事件清理：没有在useEffect的返回函数中清除scroll事件监听，组件销毁后事件仍会触发，造成内存泄漏。

可行修复方案 #

先统一兼容获取当前页面的滚动距离，再做区间判断，同时修正事件绑定逻辑：

useEffect(() => {
  const handleScroll = () => {
    try {
      // 兼容不同浏览器获取滚动高度
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      // 直接判断滚动距离是否在目标区间
      setBtn(scrollTop > 370 && scrollTop < 410);
    } catch (e) {
      console.error(e);
    }
  }
  document.addEventListener('scroll', handleScroll)
  // 组件卸载时移除事件监听
  return () => document.removeEventListener('scroll', handleScroll)
}, []) // 依赖项为空，仅组件挂载时绑定一次事件

渲染逻辑可以保留原有写法，也可以简化为：

{Btn && <button>Submit</button>}

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