javascript - 样式化组件：在滚动时传递状态

Question

我正在尝试将道具传递给滚动样式的组件，但它似乎没有任何效果（即使滚动侦听器有效）。有谁知道我哪里出错了？

const Box = styled('div')(  
  `
  ${props => props.scroll && css`
      background-color: pink;
    `};

  `
);

const [scroll, setScrolled] = useState(false);

  const scrollHandler = useCallback(() => {
    if (window.pageYOffset > 100) {
      setScrolled(true);
    }


    if (window.pageYOffset < 100) {
      setScrolled(false);
    }
  }, []);

  useEffect(() => {
    window.addEventListener('scroll', scrollHandler);
  }, [scrollHandler]);


return(
    <Box scroll={scroll}>test</Box>
)

标签： javascriptreactjsstyled-components

Answer 1

您如何使用styled-component这是主要问题没有任何问题。

可能不起作用的是您的事件侦听器，您应该侦听元素的onScroll事件而不是全局事件，window这可能会产生一些意想不到的结果，这是一个工作示例：

const Box = styled.div`
  background-color: ${({ scroll }) => (scroll ? `palegoldenrod` : `pink`)};
  height: 100px;
  overflow: auto;
`;

export default function App() {
  const [scroll, setScrolled] = useState(false);

  useEffect(() => {
    setTimeout(() => { setScrolled(false) }, 1000);
  }, [scroll]);

  return (
    <Box
      scroll={scroll}
      onScroll={() => {
        setScrolled(true);
      }}
    >
      <span>
        Lorem ipsum faucibus facilisis per nisi pharetra vel, rhoncus mattis
        scelerisque consequat fermentum integer, mauris varius orci facilisis
        aptent dictumst orci quis urna semper mollis risus. Sit tristique tempus
        posuere pharetra morbi felis et duis quisque convallis est, quisque
        tellus magna eleifend sed augue nulla dolor consequat accumsan, netus
        elementum luctus eget interdum quisque tempor euismod sem donec.
        Habitasse class aliquam risus non lacinia a scelerisque vivamus
        fermentum, consequat scelerisque diam nibh volutpat eros sociosqu
        praesent pretium tristique, nisl curae malesuada vestibulum etiam purus
        curabitur arcu. In nostra torquent porttitor varius nam nisl ornare,
        aptent amet sit erat dolor platea, imperdiet at bibendum euismod
        condimentum ut interdum id eleifend eu eros semper cubilia sagittis.
        Praesent diam pretium class nostra semper augue nulla senectus
        adipiscing aliquet, habitant nisi lacinia ultricies aenean orci
        condimentum posuere et sollicitudin eu aenean placerat feugiat nibh duis
        proin curae.
      </span>
    </Box>
  );
}