Как я могу предотвратить прокрутку только на моей домашней странице?

Question

Я делаю приложение в рельсах с response / redux, и я бы хотел, чтобы пользователь не прокручивал его, когда он находится на домашней странице. Однако, как у меня сейчас, мое приложение представляет собой одностраничное приложение; это означает, что у меня есть только один html и тег body. Я попытался добавить overflow: hidden к своему тегу body, но это не позволяет прокрутить весь сайт. У меня есть отдельный div, который содержит все компоненты моей домашней страницы, вот так (отображается в компоненте):

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>
);

Есть ли способ специально остановить прокрутку на div, который содержит всю домашнюю страницу элементы? (.splash-root-container)

Я попытался добавить свойство overflow: hidden CSS к этому элементу div, но все еще смог прокрутить домашнюю страницу (страницу spla sh).

Answer 1

сделать высоту основного контейнера равной 100vh

примерно так: .main_container {height: 100vh;}