保持滚动聚焦 - 样式 CSS flexbox 多列，行数不同

Question

我正在构建一个列数可变的布局，每列都有独立的行数。

它不是严格意义上的网格（每列的行数应该相等），我将其称为“板”布局。

目标：

用户必须只能水平滚动面板，只能垂直滚动列：我想滚动当前 focused 列并防止在整个对角线方向滚动董事会。
当用户到达列的末尾时，列的垂直滚动必须结束，而不是父板的末尾（如果有其他列高于焦点列，则板的高度可能会更长）。

我想知道我是否只能通过 CSS 实现此行为 - 最终还重构了 html。

您能否仅使用 CSS 说明第 1 点、第 2 点的可能解决方案？

这是我尝试使用 flex css 解决方案。

所需布局

列包含不同的行数，它们的背景也会相应呈现。

尝试

以下代码呈现了所需的布局，但如果我有很多列，视口将调整它们低于其他：相反，我想保持水平顺序和水平滚动。

<div class="board">
    <div class="column>
        <item>..</item>
    </div>
</div>


.board {
}

.column {
  margin: 10px;
  padding: 10px;
  border: 1px solid #cfcfcf;
  background-color: #ddd;
  display: flex;
  flex-flow: column wrap;
  flex: 1 1 30%;
  
  width: 20%;
  float:left;
}

我试过这个其他解决方案：

.grid {
  display:flex;
}

并删除 column class 中的 width: 20%; float:left;。

现在的问题是：

用户可以沿对角线移动看板对象（参见图像上的滚动条）：用户只能水平滚动看板，垂直滚动聚焦的列。
较短的列的高度是 'stretched' 以满足板的最大高度，如果其中只有元素，也会产生全彩色的列。

Answer 1

你应该使用scroll-snap 这里有一个 网格布局 的例子，如果你可以使用它：

.gallery {
    border: 1px solid lightgray;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(10, 30vw);
    grid-template-rows: repeat(10, 30vw);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-wrap: wrap;
    overflow: scroll;
    height: 90vh;
    scroll-snap-type: both mandatory;
    scroll-padding: 1rem;
}

li {
    scroll-snap-align: start;
    display: inline-block;
    border-radius: 3px;
    font-size: 0;
    background-color: red;
}

<ul class="gallery">
    <li>Lorem, ipsum dolor.</li>
    <li>Saepe, blanditiis quam!</li>
    <li>Cum, eos reprehenderit.</li>
    <li>Alias, saepe asperiores?</li>
    <li>Fuga, at exercitationem.</li>
    <li>Nihil, magnam! Officia!</li>
    <li>Voluptas, laudantium natus!</li>
    <li>Tempora, quibusdam sed.</li>
    <li>Asperiores, nisi repudiandae.</li>
    <li>Soluta, quas voluptatibus.</li>
    <li>Ipsam, totam saepe.</li>
    <li>Debitis, asperiores ipsum.</li>
    <li>Aliquam, minus corporis.</li>
    <li>Illum, voluptatem maxime.</li>
    <li>Qui, explicabo odio!</li>
    <li>Iusto, nihil illum.</li>
    <li>Iure, numquam facere.</li>
    <li>Possimus, non eos!</li>
    <li>Nesciunt, quas consectetur.</li>
    <li>Accusantium, earum autem!</li>
    <li>Tenetur, asperiores ullam.</li>
    <li>Facilis, adipisci repudiandae.</li>
    <li>Neque, doloribus eligendi!</li>
    <li>Perferendis, vitae suscipit.</li>
    <li>Doloremque, aperiam vitae?</li>
    <li>Assumenda, obcaecati molestias.</li>
    <li>Officiis, laborum omnis!</li>
    <li>Blanditiis, itaque vitae.</li>
    <li>Quis, impedit cumque!</li>
    <li>Omnis, aut repudiandae.</li>
    <li>Laboriosam, quidem ullam!</li>
    <li>Nihil, neque velit?</li>
    <li>Aperiam, voluptatum eligendi.</li>
    <li>Ratione, neque debitis!</li>
    <li>Sunt, ex exercitationem.</li>
    <li>Est, molestias eius.</li>
    <li>Praesentium, nulla molestiae.</li>
    <li>Illum, at nobis!</li>
    <li>Voluptate, tenetur minima!</li>
    <li>Atque, fugit cum?</li>
        <li>Lorem, ipsum dolor.</li>
    <li>Saepe, blanditiis quam!</li>
    <li>Cum, eos reprehenderit.</li>
    <li>Alias, saepe asperiores?</li>
    <li>Fuga, at exercitationem.</li>
    <li>Nihil, magnam! Officia!</li>
    <li>Voluptas, laudantium natus!</li>
    <li>Tempora, quibusdam sed.</li>
    <li>Asperiores, nisi repudiandae.</li>
    <li>Soluta, quas voluptatibus.</li>
    <li>Ipsam, totam saepe.</li>
    <li>Debitis, asperiores ipsum.</li>
    <li>Aliquam, minus corporis.</li>
    <li>Illum, voluptatem maxime.</li>
    <li>Qui, explicabo odio!</li>
    <li>Iusto, nihil illum.</li>
    <li>Iure, numquam facere.</li>
    <li>Possimus, non eos!</li>
    <li>Nesciunt, quas consectetur.</li>
    <li>Accusantium, earum autem!</li>
    <li>Tenetur, asperiores ullam.</li>
    <li>Facilis, adipisci repudiandae.</li>
    <li>Neque, doloribus eligendi!</li>
    <li>Perferendis, vitae suscipit.</li>
    <li>Doloremque, aperiam vitae?</li>
    <li>Assumenda, obcaecati molestias.</li>
    <li>Officiis, laborum omnis!</li>
    <li>Blanditiis, itaque vitae.</li>
    <li>Quis, impedit cumque!</li>
    <li>Omnis, aut repudiandae.</li>
    <li>Laboriosam, quidem ullam!</li>
    <li>Nihil, neque velit?</li>
    <li>Aperiam, voluptatum eligendi.</li>
    <li>Ratione, neque debitis!</li>
    <li>Sunt, ex exercitationem.</li>
    <li>Est, molestias eius.</li>
    <li>Praesentium, nulla molestiae.</li>
    <li>Illum, at nobis!</li>
    <li>Voluptate, tenetur minima!</li>
    <li>Atque, fugit cum?</li>
        <li>Lorem, ipsum dolor.</li>
    <li>Saepe, blanditiis quam!</li>
    <li>Cum, eos reprehenderit.</li>
    <li>Alias, saepe asperiores?</li>
    <li>Fuga, at exercitationem.</li>
    <li>Nihil, magnam! Officia!</li>
    <li>Voluptas, laudantium natus!</li>
    <li>Tempora, quibusdam sed.</li>
    <li>Asperiores, nisi repudiandae.</li>
    <li>Soluta, quas voluptatibus.</li>
    <li>Ipsam, totam saepe.</li>
    <li>Debitis, asperiores ipsum.</li>
    <li>Aliquam, minus corporis.</li>
    <li>Illum, voluptatem maxime.</li>
    <li>Qui, explicabo odio!</li>
    <li>Iusto, nihil illum.</li>
    <li>Iure, numquam facere.</li>
    <li>Possimus, non eos!</li>
    <li>Nesciunt, quas consectetur.</li>
    <li>Accusantium, earum autem!</li>
    <li>Tenetur, asperiores ullam.</li>
    <li>Facilis, adipisci repudiandae.</li>
    <li>Neque, doloribus eligendi!</li>
    <li>Perferendis, vitae suscipit.</li>
    <li>Doloremque, aperiam vitae?</li>
    <li>Assumenda, obcaecati molestias.</li>
    <li>Officiis, laborum omnis!</li>
    <li>Blanditiis, itaque vitae.</li>
    <li>Quis, impedit cumque!</li>
    <li>Omnis, aut repudiandae.</li>
    <li>Laboriosam, quidem ullam!</li>
    <li>Nihil, neque velit?</li>
    <li>Aperiam, voluptatum eligendi.</li>
    <li>Ratione, neque debitis!</li>
    <li>Sunt, ex exercitationem.</li>
    <li>Est, molestias eius.</li>
    <li>Praesentium, nulla molestiae.</li>
    <li>Illum, at nobis!</li>
    <li>Voluptate, tenetur minima!</li>
    <li>Atque, fugit cum?</li>
        <li>Lorem, ipsum dolor.</li>
    <li>Saepe, blanditiis quam!</li>
    <li>Cum, eos reprehenderit.</li>
    <li>Alias, saepe asperiores?</li>
    <li>Fuga, at exercitationem.</li>
    <li>Nihil, magnam! Officia!</li>
    <li>Voluptas, laudantium natus!</li>
    <li>Tempora, quibusdam sed.</li>
    <li>Asperiores, nisi repudiandae.</li>
    <li>Soluta, quas voluptatibus.</li>
    <li>Ipsam, totam saepe.</li>
    <li>Debitis, asperiores ipsum.</li>
    <li>Aliquam, minus corporis.</li>
    <li>Illum, voluptatem maxime.</li>
    <li>Qui, explicabo odio!</li>
    <li>Iusto, nihil illum.</li>
    <li>Iure, numquam facere.</li>
    <li>Possimus, non eos!</li>
    <li>Nesciunt, quas consectetur.</li>
    <li>Accusantium, earum autem!</li>
    <li>Tenetur, asperiores ullam.</li>
    <li>Facilis, adipisci repudiandae.</li>
    <li>Neque, doloribus eligendi!</li>
    <li>Perferendis, vitae suscipit.</li>
    <li>Doloremque, aperiam vitae?</li>
    <li>Assumenda, obcaecati molestias.</li>
    <li>Officiis, laborum omnis!</li>
    <li>Blanditiis, itaque vitae.</li>
    <li>Quis, impedit cumque!</li>
    <li>Omnis, aut repudiandae.</li>
    <li>Laboriosam, quidem ullam!</li>
    <li>Nihil, neque velit?</li>
    <li>Aperiam, voluptatum eligendi.</li>
    <li>Ratione, neque debitis!</li>
    <li>Sunt, ex exercitationem.</li>
    <li>Est, molestias eius.</li>
    <li>Praesentium, nulla molestiae.</li>
    <li>Illum, at nobis!</li>
    <li>Voluptate, tenetur minima!</li>
    <li>Atque, fugit cum?</li>
</ul>

Answer 2

我相信这个片段开始解决您想要的所有问题。它将面板固定为视口的大小，并在隐藏垂直溢出的同时启用水平溢出的水平滚动。列滚动是使用设置为滚动垂直溢出的嵌套列实现的

（您的列被推入第二行的原因是您指定了 wrap。）

body {
  margin: 0;
}
.board {  
  background-color: green;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  align-items: flex-start;
}
.column{
  margin: 10px;
  padding: 10px;
  flex-basis: 20%;
  min-width: 200px;
  overflow-y: scroll;
  height: 100%;
}
.column-inner {
  border: 1px solid #cfcfcf;
  background-color: #ddd;
  display: flex;
  flex-direction: column;
}
div.item {
  margin: 10px;
  padding: 10px;
  height: 100px;
  background-color: red;
}

<div class="board">
  <div class="column">
    <div class="column-inner">
      <div class="item">..</div>
      <div class="item">..</div>
    </div>
  </div>
  <div class="column">
    <div class="column-inner">
      <div class="item">..</div>
      <div class="item">..</div>
      <div class="item">..</div>
      <div class="item">..</div>
      <div class="item">..</div>
      <div class="item">..</div>
      <div class="item">..</div>
      <div class="item">..</div>
      <div class="item">..</div>
      <div class="item">..</div>
      <div class="item">..</div>
      <div class="item">..</div>
      <div class="item">..</div>
      <div class="item">..</div>
      <div class="item">..</div>
      <div class="item">..</div>

    </div>
  </div>
  <div class="column">
    <div class="column-inner">
      <div class="item">..</div>
      <div class="item">..</div>
      <div class="item">..</div>
      <div class="item">..</div>
      <div class="item">..</div>
    </div>
  </div>
  <div class="column">
    <div class="column-inner">
      <div class="item">..</div>
      <div class="item">..</div>
    </div>
  </div>
  <div class="column">
    <div class="column-inner">
      <div class="item">..</div>
      <div class="item">..</div>
    </div>
  </div>
  <div class="column">
    <div class="column-inner">
      <div class="item">..</div>
      <div class="item">..</div>
    </div>
  </div>
  <div class="column">
    <div class="column-inner">
      <div class="item">..</div>
      <div class="item">..</div>
    </div>
  </div>
  <div class="column">
    <div class="column-inner">
      <div class="item">..</div>
      <div class="item">..</div>
    </div>
  </div>
</div>

保持滚动聚焦 - 样式 CSS flexbox 多列，行数不同

Keep scrolling focused - style CSS flexbox multiple columns with different number of rows

html

css

scroll

focus

flexbox