How can I prevent scrolling on just my home page?

Question

I'm making an app in rails with react/redux, and I'd like to prevent the user from scrolling when they're on the home page. However, as I have it now, my app is a single page app; meaning that I only have one html and body tag. I tried adding overflow: hidden to my body tag, but that prevents scrolling on the entire site. I do have a separate div that holds all of my home page components like so (rendered in a component):

const Splash = () => (
  <div className="splash-root-container">
    <header>
      <HeaderNavContainer />
    </header>

    <div className="splash-background-container"></div>

    <div className="splash-text-container">
      <h1>Music for everyone.</h1>
      <p>Millions of songs. No credit card needed.</p>
      <Link to="/signup">{'Get Spotify Free'.toUpperCase()}</Link>
    </div>
  </div>
);

Is there a way to specifically stop scrolling on the div that holds all of the home page elements? (the .splash-root-container )

I tried adding an overflow: hidden CSS property to this div, but I was still able to scroll on the home page (the splash page).

Answer 1

make the height of the main container equal to 100vh

like this : .main_container{ height: 100vh;}