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

【问题标题】：How to turn on and off the scroll trigger in Material UI useScrollTrigger module?Material UI useScrollTrigger模块中如何开启和关闭滚动触发？
【发布时间】：2022-01-18 21:51:01
【问题描述】：

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

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

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

这就是我创建 scrollToColor 函数的方式：

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 中还有什么更简单、更简洁的方法可以存档吗？

谢谢！

【问题讨论】：

标签： javascript reactjs material-ui survey scrolltrigger

【解决方案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,
  });
}

【讨论】：