如何防止仅在我的主页上滚动？

Question

我正在使用 react/redux 在 Rails 中制作应用程序，我想防止用户在主页上滚动。但是，正如我现在所拥有的，我的应用程序是单页应用程序；这意味着我只有一个 html 和 body 标签。我尝试将overflow: hidden 添加到我的正文标签中，但这会阻止在整个网站上滚动。我确实有一个单独的 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，但我仍然能够在主页（启动页面）上滚动。

Answer 1

使主容器的高度等于100vh

像这样：.main_container{ height: 100vh;}