在水平轮播中添加垂直可滚动项目答案

【问题标题】：Adding a vertically scrollable item inside a horizontal carousel在水平轮播中添加垂直可滚动项目
【发布时间】：2020-01-22 06:45:02
【问题描述】：

我正在构建一个定制的水平轮播，我想在其中显示一些可垂直滚动的项目。

到目前为止我尝试过的代码：

html

<div class="carousel">
  <div class="c-item">Item-1</div>
  <!-- to be displayed vertically -->
  <div class="abs">
    <div class="a-item">Abs Item-1.1</div>
    <div class="a-item">Abs Item-1.2</div>
    <div class="a-item">Abs Item-1.3</div>
  </div>
  <div class="c-item margin">Item-2</div>
  <!-- to be displayed vertically -->
  <div class="abs">
    <div class="a-item">Abs Item-2.1</div>
    <div class="a-item">Abs Item-2.2</div>
    <div class="a-item">Abs Item-2.3</div>
  </div>
</div>
<div class="other">
  Other div
</div>

css

.carousel{
  color: #FFF;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  position: initial;
  .c-item{
    display: inline-block;
    width: 35%;
    background: #000;
    height: 100px;
    &.margin{
      //margin-left: 35%;
    }
  }
  .abs{
    background: #444;
    display: inline-block;
    vertical-align: top;
    width: 35%;
    max-height: 180px;
    overflow-y: auto;
    .a-item{
      height: 100px;
      border: 1px solid #000;
    }
  }
}
.other{
  background: yellow;
}

结果：

(codepen)

这里的问题是：我希望另一个 div 在 item-1 的下方开始；这意味着垂直滚动的 div 应该与另一个 div 重叠，并且轮播高度应该固定在 100px。我尝试将position: absolute 用于.abs div，但随后该div 不会继续滚动轮播。

所需的输出将如下所示：

【问题讨论】：

标签： html css sass

【解决方案1】：

弹性盒解决方案

每个项目的宽度为 33.33%，高度为 100px。 .multiple 中的 items 也是 100px 高。
.multiple 有 position: relative 和 overflow-y: auto。 items 里面有position: absolute。
提示：容器 -> position: relative，里面的项目 -> position: absolute。这就是它的工作原理。
top: (100 * n)px 对应于 .item.multiple 内的每个 <div>。 n 是.item.multiple 内的<div> 的索引，从0 开始。

HTML 结构已更改

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.carousel {
  display: flex;
  width: 100vw;
  overflow-x: auto;
  color: white;
}

.carousel>.item {
  flex: 1 0 33.33%;
  //margin-right: 5px;
}

.carousel>.item:nth-child(odd) {
  background: black;
}

.carousel>.item:nth-child(even) {
  background: darkgrey;
}

.carousel>.item,
.carousel>.item.multiple>div {
  height: 100px;
}

.carousel>.item.multiple {
  position: relative;
  overflow-y: auto;
}

.carousel>.item.multiple>div {
  position: absolute;
  width: 100%;
}

.carousel>.item.multiple>div:nth-child(2) {
  top: 100px;
}

.carousel>.item.multiple>div:nth-child(3) {
  top: 200px;
}


/* And so on ... 
.carousel>.item.multiple>div:nth-child(...) {}
*/

<div class="carousel">
  <div class="item">
    <div>Item-1</div>
  </div>
  <div class="item multiple">
    <div>Item-1.1</div>
    <div>Item-1.2</div>
    <div>Item-1.3</div>
  </div>
  <div class="item">
    <div>Item-2</div>
  </div>
  <div class="item multiple">
    <div>Item-2.1</div>
    <div>Item-2.2</div>
    <div>Item-2.3</div>
  </div>
</div>
<div class="other">
  Other div
</div>

【讨论】：

您好，感谢您的解决方案。在这里，我可以看到您正在更改单击时的项目，但我想要一个垂直滚动（与other div 重叠）。
滚动的 div 仍然没有与其他 div 重叠。滚动 div 可以包含大约 10 个项目，因此它的高度会更大，至少 500 像素。
我在更新的问题中添加了想要的结果

【解决方案2】：

你必须玩position检查sn-p。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.carousel {
  display: flex;
  width: 100vw;
  overflow-x: auto;
  color: white;
}

.carousel>.item {
  flex: 1 0 33.33%;
  //margin-right: 5px;
}

.carousel>.item:nth-child(odd) {
  background: black;
}

.carousel>.item:nth-child(even) {
  background: darkgrey;
}

.carousel>.item,
.carousel>.item.multiple>div {
  height: 100px;
}

.carousel>.item.multiple {
  position: relative;
  overflow-y: auto;
  height: 200px;
}

.carousel>.item.multiple>div {
  position: absolute;
  width: 100%;
}

.carousel>.item.multiple>div:nth-child(2) {
  top: 100px;
}

.carousel>.item.multiple>div:nth-child(3) {
  top: 200px;
}

.other {
  position: absolute;
  z-index: -1;
  top: 100px;
  width: 100%;
  background: green;
  height: 117px;
}


/* And so on ... 
.carousel>.item.multiple>div:nth-child(...) {}
*/

<div class="carousel">
  <div class="item">
    <div>Item-1</div>
  </div>
  <div class="item multiple">
    <div>Item-1.1</div>
    <div>Item-1.2</div>
    <div>Item-1.3</div>
  </div>
  <div class="item">
    <div>Item-2</div>
  </div>
  <div class="item multiple">
    <div>Item-2.1</div>
    <div>Item-2.2</div>
    <div>Item-2.3</div>
  </div>
</div>
<div class="other">
  Other div
</div>

【讨论】：

感谢您的回答，看起来不错。将检查并回复您
嘿，是的，它对我有用。事实上，这两种解决方案都对我有用。但由于接受的答案更接近我的用例，我在那里奖励赏金
太棒了..只要你得到了解决方案就可以了。

【解决方案3】：

您想要的结果意味着让孩子与父母重叠，我认为这是不可能的。但是您可以通过将.carousel 与另一个div （.demo 这是这个一般示例）包装起来来“破解”它，所以结果将是这样的：

.demo {overflow: visible; height: 100px;}
.carousel {
  color: #FFF;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  position: initial;
}
.carousel .c-item {
  display: inline-block;
  width: 35%;
  background: #000;
  height: 100px;
}
.carousel .abs {
  background: #444;
  display: inline-block;
  vertical-align: top;
  width: 35%;
  max-height: 180px;
  overflow-y: auto;
}
.carousel .abs .a-item {
  height: 100px;
  border: 1px solid #000;
}
.other {
  background: yellow;
  height: 200px;
}

<div class="demo">
  <div class="carousel">
    <div class="c-item">Item-1</div>
    <div class="abs">
      <div class="a-item">Abs Item-1.1</div>
      <div class="a-item">Abs Item-1.2</div>
      <div class="a-item">Abs Item-1.3</div>
    </div>
    <div class="c-item margin">Item-2</div>
    <div class="abs">
      <div class="a-item">Abs Item-2.1</div>
      <div class="a-item">Abs Item-2.2</div>
      <div class="a-item">Abs Item-2.3</div>
    </div>
  </div>
</div>
<div class="other">
  Other div
</div>

从 sn-p 中可以看出，scroll-x 没有显示 - 但它存在。您可以单击.carousel 项目之一并左右滚动它们。

由于.carousel 滚动并不明显，您可以添加额外的buttons 来滚动它：

.demo {overflow: visible; height: 100px;z-index: 3;}
.carousel {
  color: #FFF;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  position: initial;
}
.carousel .c-item {
  display: inline-block;
  width: 35%;
  background: #000;
  height: 100px;
}
.carousel .abs {
  background: #444;
  display: inline-block;
  vertical-align: top;
  width: 35%;
  max-height: 180px;
  overflow-y: auto;
}
.carousel .abs .a-item {
  height: 100px;
  border: 1px solid #000;
}
.other {
  background: yellow;
  height: 200px;
}

<div class="demo">
  <button onclick="document.querySelectorAll('.carousel')[0].scrollLeft += 20;" style="position: fixed; top: 50%; right: 0;">L</button>
  <button onclick="document.querySelectorAll('.carousel')[0].scrollLeft -= 20;" style="position: fixed; top: 50%; left: 0;">R</button>
  <div class="carousel">
    <div class="c-item">Item-1</div>
    <div class="abs">
      <div class="a-item">Abs Item-1.1</div>
      <div class="a-item">Abs Item-1.2</div>
      <div class="a-item">Abs Item-1.3</div>
    </div>
    <div class="c-item margin">Item-2</div>
    <div class="abs">
      <div class="a-item">Abs Item-2.1</div>
      <div class="a-item">Abs Item-2.2</div>
      <div class="a-item">Abs Item-2.3</div>
    </div>
  </div>
</div>
<div class="other">
  Other div
</div>

希望有帮助！

【讨论】：

@SahilMittal 你检查过这个吗？