时间戳

首页 > 解决方案 > 如何防止仅在我的主页上滚动？

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

问题描述

我正在使用 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这个 div 添加一个 CSS 属性，但我仍然能够在主页（启动页面）上滚动。

标签： cssruby-on-railsreactjs

解决方案

使主容器的高度等于 100vh

像这样：.main_container{ 高度：100vh;}

推荐阅读