Javascript 如何在样式化组件中获取当前窗口页面偏移？

我正在努力翻译动画，它依赖于窗口的滚动偏移

我有这样的想法：

const StyledHeading = styled.h1`
  font-size: ${({ theme }) => theme.fontSize.l};
  letter-spacing: 1px;
  font-family: ${({ theme }) => theme.font.firaSans};
  margin: 0;
  transition: 0.25s ease-in-out;
  transform: translateX(${({ offset }) => (offset > 100 ? '-50px' : '0px')});
`;

export default function Navbar() {
  const [offset, setOffset] = useState(window.pageYOffset);

  useEffect(() => {
    window.addEventListener('scroll', () => {
      setOffset(window.pageYOffset);
    });
  });

  return (
    <StyledHeader >
      <StyledWrapper>
        <StyledHeading offset={offset}>
          Bookphiles <i className="fas fa-book-open" />
        </StyledHeading>
        <nav>
          <NavLinks  />
        </nav>
      </StyledWrapper>
    </StyledHeader>
  );
}

const StyledHeading=styled.h1`
字体大小：${（{theme}）=>theme.fontSize.l}；
字母间距：1px；
字体系列：${（{theme}）=>theme.font.firaSans}；
保证金：0；
过渡：0.25秒缓进缓出；
转换：translateX（${（{offset}）=>（offset>100？'-50px'：'0px'））；
`;
导出默认函数Navbar（）{
const[offset，setOffset]=useState（window.pageYOffset）；
useffect（（）=>{
window.addEventListener（'scroll'，（）=>{
setOffset（window.pageYOffset）；
});
});
返回(
书迷
);
}

---

但它似乎是以一种非常低效的方式完成的，因为每个卷轴都会导致DOM重新渲染。这可以用更好的方法来完成吗？

IMHO，如果您想避免不稳定的动画，您应该依靠refs DOM管理，而不是React render（）：

import React，{useState，useffect，createRef}来自'React'；
导出默认函数Navbar（）{
const ref=createRef（）；
useffect（（）=>{
window.addEventListener（'scroll'，handleScroll）；
});
handleScroll=（e）=>{
常量偏移=window.pageYOffset；
ref.current.style.transform=`translateX（${（{offset}）=>（offset>100？'-50px'：'0px'）}）`；
}
返回(
//…代码
书迷
//..代码
);
}

请注意，我的代码中可能有一些输入错误，但其概念是在滚动管理中不涉及重新渲染。

---

请记住在卸载组件之前删除侦听器。

尝试使用lodash的节流或去盎司功能来限制事件处理程序函数的执行次数。这样，事件处理程序最多每200毫秒执行一次：

window.addEventListener('scroll', _.throttle(() => {
  setOffset(window.pageYOffset);
}, 200));

---

这是一篇很好的文章，更详细地解释了这个想法，并提供了更多的例子：

我应该在我的样式化组件中访问ref，还是它只是自动地对其进行样式化？只是样式化，如果您将其传递给样式化组件，则需要重新渲染才能获得它。

window.addEventListener('scroll', _.throttle(() => {
  setOffset(window.pageYOffset);
}, 200));