Is it possible to change route on scroll?

问题

I want to load multiple components on a single page and have different routes for all of them. For example i hit a route /article/1 and it loads a component, after scrolling through completely through that article i want the route to change to /article/2 and the corresponding article to load. I am using react and react router, basically i want 4 (article/3 , article/4) articles on a page and all these should be scrollable with the route changing as i scroll onto a particular article. How can i achieve this using react and react-router?

回答1:

use react-perfect-scrollbar package from npm.

index.js (main entry point of your application) add this css

import 'react-perfect-scrollbar/dist/css/styles.css';

your component file where you want on scroll change url

import PerfectScrollbar from 'react-perfect-scrollbar';

import { Redirect } from 'react-router-dom';

handleScroll = () => {
  <Redirect to="/article/2" />
} 

<PerfectScrollbar onYReachEnd={this.handleScroll}> // when you reach then end of screen it's call handleScroll function and redirect to other url.so based on your requirements you can pick up from here. 
    // your articles code..
</PerfectScrollbar>

来源：https://stackoverflow.com/questions/55512817/is-it-possible-to-change-route-on-scroll