html - 在水平旋转木马内添加垂直可滚动元素

Question

我正在构建一个定制的水平旋转木马，我想在其中显示一些可以垂直滚动的元素。

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

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 在滚动轮播时不会移动。

所需的输出将如下所示:

Answer 1

flex 盒解决方案

每一项都是 33.33% 宽和 100 像素 高的。里面的元素.multiple也是 100 像素 高的。

.multiple有 position: relative和 overflow-y: auto .里面的元素有position: absolute .

提示 : 容器 -> position: relative , 里面的元素 -> position: absolute .这就是它的工作原理。

top: (100 * n)px每个<div>内.item.multiple . n是 <div> 的索引内.item.multiple , 从 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>