保持滚动焦点-CSS Flexbox样式的多列具有不同的行数

问题描述

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

严格来说，它不是网格（每列应具有相等的行数），我将其称为“木板”布局。

目标：

• 用户必须只能在面板上水平滚动，而在列上垂直滚动：我想滚动当前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;
}

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

现在的问题是：

• 用户可以沿对角线移动板对象（请参见图像上的滚动条）：用户只能水平滚动板，垂直滚动聚焦的列。

• 较短的列的高度被“拉伸”以满足板子的最大高度，即使其中仅包含元素，也会产生全彩色的列。

解决方法

我相信这段代码可以解决您的所有要求。它将板固定为视口的大小，并在隐藏垂直溢出的同时启用水平滚动以进行水平溢出。使用设置为滚动垂直溢出的嵌套列来实现列滚动

（将列推送到第二行的原因是您指定了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>

,

您应该使用滚动快照 如果您可以使用以下示例，请使用网格布局：

.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,fugit cum?</li>
</ul>