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

时间：2019-09-21 14:50:53

标签： html css sass

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

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

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;
}

结果：

enter image description here

（codepen）

这里的问题是：我希望另一个div从item-1的下面开始；表示垂直滚动的div应该与另一个div重叠，并且轮播的高度应固定为100px。我尝试将position: absolute的div使用.abs，但随后该div在滚动轮播时不会移动。

所需的输出将如下所示：

enter image description here

3 个答案:

答案 0 :(得分：3)

Flexbox解决方案

  • 每个项目的宽度为 33.33％，高度为 100px 。 .multiple内的 items 也 100px 。
  • .multiple具有position: relative和overflow-y: auto。里面的 items 有position: absolute。
  • 提示：容器-> position: relative，内部项目-> position: absolute。就是这样。
    • top: (100 * n)px中每个<div>的
  • .item.multiple。 n是<div>中.item.multiple的 index ，从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>

答案 1 :(得分：1)

您必须使用position检查片段。

* {
  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>

答案 2 :(得分：1)

您想要的结果意味着让孩子与父母重叠，而我认为这是不可能的。但是您可以通过将.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>

从摘要中可以看到，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>

希望有帮助！

相关问题
最新问题