html - 向 CSS 网格布局中的每一列添加滚动

Question

我想在我的网格布局中的每个列上单独滚动。

目前，我正在开发一个仅限移动设备的 Web 应用程序。我想为纵向和横向使用不同的网格布局。

纵向只有 1 列，每个元素都在另一个元素之后。这里没问题。

在横向方向我想使用 2 列。我的全部内容显示在左侧，导航移动到右侧。现在我希望两个部分都有一个单独的卷轴。有没有办法实现这个？如果当前列的内容结束，滚动应该停止。

CodePen 上的代码:https://codepen.io/SuddenlyRust/pen/rmJOqV

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-gap: 15px 0;
}

header {
  background-color: green;
  grid-column: 1;
  grid-row: 1
}

main {
  background-color: blue;
  grid-column: 1;
  grid-row: 2;
}

nav {
  background-color: pink;
  grid-column: 1;
  grid-row: 3;
}

footer {
  background-color: teal;
  grid-column: 1;
  grid-row: 4;
}

@media only screen and (orientation: landscape) {
  .grid-container {
    grid-template-columns: 5fr 4fr;
  }
  nav {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
  footer {
    grid-row: 3;
  }
}

h1 {
  min-height: 200px;
}

<div class="grid-container">
  <header>
    <h1>Logo</h1>
  </header>
  <main>
    <h1>content</h1>
  </main>
  <nav>
    <h1>Navigation</h1>
  </nav>
  <footer>
    <h1>Footer</h1>
  </footer>
</div>

非常感谢您的宝贵时间!

Answer 1

In the landscape orientation I want to use 2 columns. My whole content is displayed on the left side and my navigation moves to the right side. Now I want both parts to have a separate scroll. Is there a way to implement this? And the scroll should stop if the content of the current column ends.

在左侧列中，您有三个独立的网格元素:header、main 和 footer 元素。

在右栏中，您有一个网格项:nav 元素。

向左列添加垂直或水平滚动条是不可行的，因为存在三个独立的元素。您需要将所有元素包装在一个容器中才能使单个滚动条正常工作。

向右列添加垂直或水平滚动条非常容易，因为只有一个元素。

假设您正在谈论垂直滚动条，这里有一种方法可以让它工作:

body {
  margin: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-gap: 15px 0;
  height: 100vh;
}

header {
  background-color: green;
  grid-column: 1;
  grid-row: 1
}

main {
  background-color: blue;
  grid-column: 1;
  grid-row: 2;
}

nav {
  background-color: pink;
  grid-column: 1;
  grid-row: 3;
  overflow: auto;
}

footer {
  background-color: teal;
  grid-column: 1;
  grid-row: 4;
}

@media only screen and (orientation: landscape) {
  .grid-container {
    grid-template-columns: 5fr 4fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  nav {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
  footer {
    grid-row: 3;
  }
}

<div class="grid-container">
  <header>
    <h1>Logo</h1>
  </header>
  <main>
    <h1>content</h1>
  </main>
  <nav>
    <h1>Navigation<br><br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br></h1>
  </nav>
  <footer>
    <h1>Footer</h1>
  </footer>
</div>

revised codepen

---

浏览器对 CSS 网格的支持

• Chrome - 自 2017 年 3 月 8 日起全面支持(第 57 版)
• Firefox - 自 2017 年 3 月 6 日起全面支持(第 52 版)
• Safari - 截至 2017 年 3 月 26 日的全面支持(版本 10.1)
• Edge - 截至 2017 年 10 月 16 日的全面支持(第 16 版)
• IE11 - 不支持当前规范；支持过时版本

这是完整的图片:http://caniuse.com/#search=grid