如何上下滚动 SideBar 而不是整个窗口？答案

【问题标题】：How do I scroll up and down a SideBar rather than the whole window?如何上下滚动 SideBar 而不是整个窗口？
【发布时间】：2019-11-26 13:13:14
【问题描述】：

我只会显示相关代码，因为它有很多。这是父组件App：

export default class App extends React.Component {
    render() {
        return (
            <nav className="navbar navbar-expand-xl navbar-side" aria-label="Side Navigation">
                <div className={`navbar-toggler ${this.state.notification ? 'has-notification' : ''}`} data-toggle="collapse" data-target="#sidebarCollapse" aria-controls="sidebarCollapse" aria-expanded="false" aria-label="Toggle side navigation">
                    Menu
                </div>
                <div className="collapse navbar-collapse" id="sidebarCollapse">
                    <ul className="navbar-nav mr-auto">
                        <li className="nav-user">
                            <div className="profile-pic">
                                <i className="fa fa-lg fa-user mt-1" />
                            </div>
                            <i><span>{this.state.authenticatedUser.first_name} {this.state.authenticatedUser.last_name}</span><br />{this.state.authenticatedUser.job_title}</i>
                        </li>
                        <NavBar />
                    </ul>
                </div>
            </nav>
        )
    }

这是导航栏组件：

class NavBar extends Component {

constructor(props) {
    super(props);

    this.state = {
        auth: false,
        slide: 0,  // How much should the Navbar slide up or down
        lastScrollY: 0,  // Keep track of current position in state
    }
}

componentWillMount() {
    let navbar = document.getElementById('navbar-div');
    navbar.addEventListener('scroll', this.handleScroll);
}

componentWillUnmount() {
    let navbar = document.getElementById('navbar-div');
    navbar.removeEventListener('scroll', this.handleScroll);
}

handleScroll = () => {
    let navbar = document.getElementById('navbar-div');
    const { lastScrollY } = this.state; 
    const currentScrollY = navbar.scrollY;

    if (currentScrollY > lastScrollY) {
      this.setState({ slide: '-48px' });
    } else {
      this.setState({ slide: '0px' });
    }
    this.setState({ lastScrollY: currentScrollY });
};

render() {
    return (
        <div className="navbar-div" id="navbar-div">
            {this.adminMenu()}
            {this.usersMenu()}
        </div>
    );
}

}

adminMenu 和 usersMenu 只是输出对象名称的对象数组。我得到的错误说导航栏为空，因此它无法将事件侦听器添加到空对象上。我该如何解决？

【问题讨论】：

标签： css reactjs addeventlistener onscroll

【解决方案1】：

使用componentDidMount 而不是componentWillMount。后者将在呈现任何标记之前运行。

您可以在此处阅读有关生命周期方法的更多信息：https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class

但是，我强烈建议您在元素上应用处理程序而不是 componentDid/Will/Mount/Unmount，如下所示：

render() {
    return (
        <div className="navbar-div" id="navbar-div" onScroll={this.handleScroll}>
            {this.adminMenu()}
            {this.usersMenu()}
        </div>
    );
}

【讨论】：