根据材料设计指南：
滚动时，顶部应用栏可以 [...] 以下列方式转换：
- 向上滚动隐藏顶部应用栏
- 向下滚动显示顶部应用栏
当顶部应用栏滚动时，其高于其他元素的高度变得明显。
在 material-ui-next 中是否有任何内置方法可以执行此操作，还是应该将其视为新功能？你能提示一下如何实现指南中描述的 AppBar 组件的动画吗？
如何使 Material-ui-next 中的 AppBar 组件对滚动事件做出react
IT技术
javascript
reactjs
material-ui
appbar
2021-05-02 16:04:34
3个回答
据我所知，目前没有现成的解决方案。不过它很容易实现。这是订阅滚动事件并相应地隐藏或显示 AppBar 的片段：
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 中，您可以简单地使用以下内容
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
对于那些谁仍在寻找内置功能，在滚动隐藏appbar是可用的material-ui。