使用无限滚动进行滚动高度调整

Question

At the moment when 'scroll' is at the very bottom, the function getUsers () is called. How to set the scroll so that it doesn't reach the end of the slider, and the getUsers () function is called. That there would be an infinity scroll effect. I mean the scroll effect like here: https://codesandbox.io/s/ww7npwxokk . When the scroll reaches the bottom, it goes back.

Code here: https://stackblitz.com/edit/react-nq8btq

import './style.css';
import axios from 'axios';

class App extends Component {
  constructor() {
    super();
    this.state = {
      users: [],
      page: 1
    };
  }

  componentDidMount() {
    this.getUsers();
  }

  getUsers = () => {
    axios({
      url: `https://jsonplaceholder.typicode.com/users`,
      method: "GET"
    })
    .then(res => { 
      this.setState({
        users: res.data
      });
    })
    .catch(error => {
      console.log(error);
    }) 
  }

  scroll = (e) => {
    const page = this.state.page;
    const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
    if (bottom) { 
      alert('bottom');
      this.getUsers()

      this.setState({
        page: this.state.page + 1
      })
    }

    const top = e.target.scrollTop; 

     if(top === 0 && page > 1) {
        alert('I AM AT THE TOP');

         this.setState({
          page: this.state.page - 1
        })
      }
  }

  render() {
    console.log(this.state.page)
     console.log(this.state.users)
    return (
      <div>
         <div onScroll={this.scroll} className="container">
            <ul>
              {this.state.users.map((user, index) => 
                <li>
                  {user.name}
                </li>   
              )}
            </ul>
         </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 1

Here I've updated your code, slightly simplified, but mostly your code with the key points commented.

class App extends Component {
  state = {
    users: [],
    page: 1
  };

  componentDidMount() {
    this.getUsers();
  }

  getUsers = () => {
    axios({
      url: `https://jsonplaceholder.typicode.com/users`,
      method: "GET"
    })
    .then(res => { 
      this.setState({
        // *you must append to users in state, otherwise 
        // the list will not grow as the user scrolls
        users: [...this.state.users, ...res.data],
        page: this.state.page + 1
      });
    })
    .catch(error => {
      console.log(error);
    }) 
  }

  scroll = (e) => {
    // *simplified, to only handle appending to the list
    // note the 50px from the bottom, adjust as required
    // so that the request is made before the users reaches
    // the bottom of the page under normal scrolling conditions.  
    if (e.target.scrollHeight - e.target.scrollTop <= e.target.clientHeight + 50) { 
      this.getUsers();
    }
  }

  render() {
    return (
      <div onScroll={this.scroll} className="container">
        <ul>
          {this.state.users.map((user, index) =>
            // *always add a unique key for each item
            <li key={user.name}>
              {user.name}
            </li>   
          )}
        </ul>
      </div>
    );
  }
}

Answer 2

All you need to do is decide when to call get users.

ie if you want it to be called when you have already scrolled through 70% the height then the factor would be 0.3 (30%)

Whenever the scroll exceeds the 70% mark this.getusers() would be called.

Check out how I have modified the same condition written by you.

Rest of the code remains the same

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import axios from 'axios';

class App extends Component {
  constructor() {
    super();
    this.state = {
      users: [],
      page: 1
    };
  }

  componentDidMount() {
    this.getUsers();
  }

  getUsers = () => {
    axios({
      url: `https://jsonplaceholder.typicode.com/users`,
      method: "GET"
    })
    .then(res => { 
      this.setState({
        users: res.data
      });
    })
    .catch(error => {
      console.log(error);
    }) 
  }

  scroll = (e) => {
    const page = this.state.page;
    const bottom = e.target.scrollHeight - e.target.scrollTop < e.target.clientHeight-0.3*e.target.clientHeight;
    if (bottom) { 
      alert('bottom');
      this.getUsers()

      this.setState({
        page: this.state.page + 1
      })
    }

    const top = e.target.scrollTop; 

     if(top === 0 && page > 1) {
        alert('I AM AT THE TOP');

         this.setState({
          page: this.state.page - 1
        })
      }
  }

  render() {
    console.log(this.state.page)
     console.log(this.state.users)
    return (
      <div>
         <div onScroll={this.scroll} className="container">
            <ul>
              {this.state.users.map((user, index) => 
                <li>
                  {user.name}
                </li>   
              )}
            </ul>
         </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 3

This lib should do the trick for you

$ yarn add react-infinite-scroller

Very simple to implement

<InfiniteScroll
  pageStart={0}
  loadMore={this.getUsers()}
  hasMore={this.state.hasMoreUsers}
  loader={<div key={0}>loading ...</div>}
> 
  <li>
    {user.name}
  </li>
</InfiniteScroll>

Don't forget to import the lib in your component file

import InfiniteScroll from 'react-infinite-scroller';