如何使 Material-ui-next 中的 AppBar 组件对滚动事件做出反应答案

【问题标题】：How to make AppBar component from material-ui-next react to scroll events如何使 Material-ui-next 中的 AppBar 组件对滚动事件做出反应
【发布时间】：2018-03-16 00:28:57
【问题描述】：

根据Material Design guidelines：

滚动时，顶部应用栏可以 […] 以下列方式变换：
- 向上滚动隐藏顶部应用栏
- 向下滚动显示顶部应用栏
当顶部应用栏滚动时，它在其他元素之上的高度变得明显。

material-ui-next 中是否有任何内置方法可以做到这一点，还是应该将其视为一项新功能？能否指点一下如何实现指南中描述的 AppBar 组件的动画？

【问题讨论】：

标签： javascript reactjs material-ui appbar

【解决方案1】：

据我所知，目前还没有开箱即用的解决方案。虽然它很容易实现。这是一个订阅滚动事件并相应地隐藏或显示 AppBar 的 sn-p：

const styles = {
  root: {
    flexGrow: 1,
  },
  show: {
    transform: 'translateY(0)',
    transition: 'transform .5s',
  },
  hide: {
    transform: 'translateY(-110%)',
    transition: 'transform .5s',
  },
};

class CollapsibleAppBar extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      shouldShow: null,
    };

    this.lastScroll = null;

    this.handleScroll = this.handleScroll.bind(this);
    // Alternatively, you can throttle scroll events to avoid
    // updating the state too often. Here using lodash.
    // this.handleScroll = _.throttle(this.handleScroll.bind(this), 100);
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll, { passive: true });
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll(evt) {
    const lastScroll = window.scrollY;

    if (lastScroll === this.lastScroll) {
      return;
    }

    const shouldShow = (this.lastScroll !== null) ?  (lastScroll < this.lastScroll) : null;

    if (shouldShow !== this.state.shouldShow) {
      this.setState((prevState, props) => ({
        ...prevState,
        shouldShow,
      }));
    }

    this.lastScroll = lastScroll;
  }

  render() {
    const { classes } = this.props;
    return (
        <AppBar
      position="fixed"
      color="default"
      className={
            `${classes.root} ${
              this.state.shouldShow === null ? '' : (
                this.state.shouldShow ? classes.show : classes.hide
              )
            }`
          }
    >
          <Toolbar>
            <Typography variant="title" color="inherit">
              Title
            </Typography>
          </Toolbar>
        </AppBar>
    );
  }
}

CollapsibleAppBar.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CollapsibleAppBar);

【讨论】：

非常感谢！这是一个使用当前版本的 Material-UI (v1) 实现您的解决方案的演示：codesandbox.io/s/4z56yl6rm4

【解决方案2】：

在当前版本的Material-ui中，可以简单的使用如下

import clsx from "clsx";
import useScrollTrigger from "@material-ui/core/useScrollTrigger";
const trigger = useScrollTrigger();

<AppBar className={trigger ? classes.show : classes.hide}>
</AppBar>

https://material-ui.com/components/app-bar/#usescrolltrigger-options-trigger

【讨论】：

是否有使用新版本的相同示例？

【解决方案3】：

对于那些仍在寻找内置功能的人，Hide appbar on scroll 可在material-ui 中找到。

【讨论】：