如何在滚动过程中移动 FAB

Question

我也想拥有这样的Fab

<Box display="flex" alignItems="center"justifyContent="center">
     <Fab color="primary" aria-label="add" variant="extended" size="large" style={{position: 'absolute', bottom: '2.2rem'}}>
         <AddShoppingCartIcon />
         Add to shopping cart
     </Fab>
</Box>

当我进入网站时，按钮应该在底部，marginBottom: 0。当我向下滚动到最后时，Fab 的最终位置应该是例如底部边距：2rem。 有谁知道如何实现这一目标？

感谢您的帮助

Answer 1

您可以通过使用 React hooks 根据用户的滚动位置更新 Fab 组件的样式来实现此效果。这是一个示例实现：

import React, { useState, useEffect } from "react";
import { Box, Fab } from "@material-ui/core";
import AddShoppingCartIcon from "@material-ui/icons/AddShoppingCart";

function ScrollableFab() {
  const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);

  useEffect(() => {
    function handleScroll() {
      const scrolledToBottom =
        window.innerHeight + window.pageYOffset >= document.body.offsetHeight;
      setIsScrolledToBottom(scrolledToBottom);
    }

    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  const fabStyle = {
    position: "fixed",
    bottom: isScrolledToBottom ? "2.2rem" : "0",
  };

  return (
    <Box display="flex" alignItems="center" justifyContent="center">
      <Fab
        color="primary"
        aria-label="add"
        variant="extended"
        size="large"
        style={fabStyle}
      >
        <AddShoppingCartIcon />
        Add to shopping cart
      </Fab>
    </Box>
  );
}

export default ScrollableFab;