如果用户向下滚动，我想给导航栏添加一个颜色背景。 当scrollY的值等于0时，nav的背景变为透明。
我在componentDidMount生命周期方法中添加了一个滚动事件。 在这个里面我放了一个改变状态的函数。 它工作，但当我滚动性能急剧下降，我不知道如何使它更顺利。
当state.open等于true时，nav元素接收类。
componentDidMount() {
window.addEventListener("scroll", this.activeNavTab, {
passive: true,
});
}
activeNavTab() {
if (window.scrollY > 0) {
this.setState(() => ({ navTab: true }));
} else {
this.setState(() => ({ navTab: false }));
}
}
componentWillUnmount() {
window.removeEventListener("scroll", this.activeNavTab);
}
问题2
在自己的自定义方法中操作DOM元素是一个很好的实践？ 例如:
toggleMenu() {
document.body.classList.toggle("disablescroll");
this.setState((prevState) => ({ open: !prevState.open }));
}
只是不要每次在scroll方法工作时调用this.ActiveNavTab.。。 用延迟调用它。。。最简单的方法就是用lodash函数debounce包装你的函数。 它应该提高性能
const delay = 500
const activeNavTabDebounced = _.debounce(this.activeNavTab, delay)
window.addEventListener("scroll", activeNavTabDebounced, {
passive: true,
});
然后用
componentWillUnmount() {
window.removeEventListener("scroll", activeNavTabDebounced);
}
