Material UI useScrollTrigger模块中如何开启和关闭滚动触发？

Question

我正在尝试使用 React 中的 Material UI 创建一个调查页面。 我希望我的调查在用户滚动问题时打开，并在用户滚动出问题时关闭。 类似于此页面的行为。

https://www.surveymonkey.com/r/Typical-Customer-Demographics-Template

经过一番研究，我决定在 MUI 中使用 useScrollTrigger 模块。 当我向下滚动到问题时，我能够打开这些问题，但是当我向下滚动时，我仍然无法找到一种方法来关闭它们。

这就是我创建 scrollToColor function 的方式：

import { useScrollTrigger } from "@material-ui/core";

export default function ScrollToColor(props) {
  const {
    threshold,
    threshold2,
    textColorBefore,
    textColorAfter,
    fadeIn,
    fadeOut,
    children,
    ...other
  } = {
    threshold: 50,
    threshold2: 100,
    textColorBefore: "gray",
    textColorAfter: "black",
    fadeIn: "0.1s ease-in",
    fadeOut: "0.1s ease-out",
    ...props,
  };

  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: threshold,
    target: props.window ? window() : undefined,
  });

  const trigger2 = useScrollTrigger({
    disableHysteresis: true,
    threshold: threshold2,
    target: props.window ? window() : undefined,
  });

  return React.cloneElement(children, {
    style: {
      color: trigger ? textColorAfter : textColorBefore,
      transition: trigger ? fadeIn : fadeOut,
      color: trigger2 ? textColorBefore : textColorAfter,
      transition: trigger2 ? fadeOut : fadeIn,
    },
    ...other,
  });
}

我创建了 2 个触发器，所以当它滚动到问题时，文本颜色变成黑色，当滚动出去时，它又变回灰色。 这是我如何将其添加到父组件的示例代码。

import {
  AppBar,
  Toolbar,
  Typography,
  ThemeProvider,
  CssBaseline,
  createMuiTheme
} from "@material-ui/core";
import ScrollToColor from "./ScrollToColor";

const NavbarscrollToColor = props => {
  const theme = createMuiTheme();

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />

      <ScrollToColor>
        <AppBar position="static">
          <Toolbar>
            <Typography variant="h5" noWrap>
              {props.title}
            </Typography>
          </Toolbar>
        </AppBar>
      </ScrollToColor>
    </ThemeProvider>
  );
};

export default NavbarscrollToColor;

但不幸的是，这不起作用。 关于如何完成这项工作的任何提示？

此外，除了使用 MUI useScrollTrigger 模块之外，在 React 中是否有任何更简单、更清洁的方法可以存档？

谢谢！

Answer 1

在这个问题上花了更多时间之后，这是我想出的有效解决方案：

import { useScrollTrigger } from "@material-ui/core";

export default function ScrollToColor(props) {
  const {
    threshold,
    threshold2,
    textColorBefore,
    textColorAfter,
    fadeIn,
    fadeOut,
    children,
    ...other
  } = {
    threshold: 0,
    threshold2: 100,
    textColorBefore: "gray",
    textColorAfter: "black",
    fadeIn: "0.3s ease-in",
    fadeOut: "0.3s ease-out",
    ...props,
  };

  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: threshold,
    target: props.window ? window() : undefined,
  });

  const trigger2 = useScrollTrigger({
    disableHysteresis: true,
    threshold: threshold2,
    target: props.window ? window() : undefined,
  });

  return React.cloneElement(children, {
    style: {
      color: trigger && !trigger2 ? textColorAfter : textColorBefore,
      transition: trigger && !trigger2 ? fadeIn : fadeOut,
    },
    ...other,
  });
}