相对于创建的滚动条的无限滚动，而不是浏览器的滚动

Question

当我删除.infiniteScroll类时，无限滚动将在整个浏览器窗口中起作用。如何设置onScroll，以使无穷大滚动相对于div类的.infiniteScroll窗口起作用。

图片：https://imgur.com/a/WfpNI73

代码：https://stackblitz.com/edit/react-protc3

import React, { Component, Fragment } from "react";
import { render } from "react-dom";
import request from "superagent";

    class App extends Component {
      constructor(props) {
        super(props);

        // Sets up our initial state
        this.state = {
          error: false,
          hasMore: true,
          isLoading: false,
          users: [],
        };

        // Binds our scroll event handler
        window.onscroll = () => {
          const {
            loadUsers,
            state: {
              error,
              isLoading,
              hasMore,
            },
          } = this;

          // Bails early if:
          // * there's an error
          // * it's already loading
          // * there's nothing left to load
          if (error || isLoading || !hasMore) return;

          // Checks that the page has scrolled to the bottom
          if (
            window.innerHeight + document.documentElement.scrollTop
            === document.documentElement.offsetHeight
          ) {
            loadUsers();
          }
        };
      }

      componentWillMount() {
        // Loads some users on initial load
        this.loadUsers();
      }

      loadUsers = () => {
        this.setState({ isLoading: true }, () => {
          request
            .get('https://randomuser.me/api/?results=10')
            .then((results) => {          
              // Creates a massaged array of user data
              const nextUsers = results.body.results.map(user => ({
                email: user.email,
                name: Object.values(user.name).join(' '),
                photo: user.picture.medium,
                username: user.login.username,
                uuid: user.login.uuid,
              }));

              // Merges the next users into our existing users
              this.setState({
                // Note: Depending on the API you're using, this value may be
                // returned as part of the payload to indicate that there is no
                // additional data to be loaded
                hasMore: (this.state.users.length < 100),
                isLoading: false,
                users: [
                  ...this.state.users,
                  ...nextUsers,
                ],
              });
            })
            .catch((err) => {
              this.setState({
                error: err.message,
                isLoading: false,
               });
            })
        });
      }

      render() {
        const {
          error,
          hasMore,
          isLoading,
          users,
        } = this.state;

        return (
          <div className="infiniteScroll">
            <h1>Infinite Users!</h1>
            <p>Scroll down to load more!!</p>
            {users.map(user => (
              <Fragment key={user.username}>
                <hr />
                <div style={{ display: 'flex' }}>
                  <img
                    alt={user.username}
                    src={user.photo}
                    style={{
                      borderRadius: '50%',
                      height: 72,
                      marginRight: 20,
                      width: 72,
                    }}
                  />
                  <div>
                    <h2 style={{ marginTop: 0 }}>
                      @{user.username}
                    </h2>
                    <p>Name: {user.name}</p>
                    <p>Email: {user.email}</p>
                  </div>
                </div>
              </Fragment>
            ))}
            <hr />
            {error &&
              <div style={{ color: '#900' }}>
                {error}
              </div>
            }
            {isLoading &&
              <div>Loading...</div>
            }
            {!hasMore &&
              <div>You did it! You reached the end!</div>
            }
          </div>
        );
      }

CSS

.infiniteScroll {
  width: 300px;
  height: 400px;
  overflow: hidden;
  border: 1px solid black;
}

.infiniteScroll:hover{
  overflow-y: auto;
}