React component should load onScroll and the scrollbar has to be hidden?

Question

import React, { Component } from 'react';
import './App.css';

import Home from './Components/Home/Home';
import Videos from './Components/Videos/Videos';
import Services from './Components/Services/Services';
import Clients from './Components/Clients/Clients';
import Footer from './Components/Footer/Footer';

class App extends Component {
  render() {
    return (
      <div className="App">
      <Home />
      <Videos />
      <Services />
      <Clients />
      <Footer />
      </div>
    );
  }
}

export default App;

i have a react app where i am done developing them and now i have a problem the one who gave this was asking me to hide the scrollbar and load the other components when he scrolls one after the other

[it should look like in the image but the scroll bar has to be hidden][1]

  [1]: https://i.stack.imgur.com/DDnOl.jpg