滚动条不考虑 child div 中的溢出

Question

我正在尝试让部分产品位于屏幕外并可以滚动，以模拟移动设备的组件。

滚动条不会到达 product-carousel class 的末尾，但是如果我删除隐藏在卡片 class 中的溢出，我可以看到在 class 处有一个滚动条parent div 的底部将正确运行。我想将此行为移至轮播。

我需要做什么才能在轮播下看到正确的滚动条而不是 parent div？滚动 parent div 结果显示背景，我只想让产品滑动到 left/right。

滚动条不考虑溢出

旋转木马的宽度正确

从卡片中移除溢出后 parent 显示了正确的行为，但对于 parent（见底部的小滚动条）

HTML

<div class="cards">
    <div class="product-carousel">
      <div class="card product">
             <img class="home product-image" src="assets/product1.jpg"></img>
             <div>
                ...
                </div>
      </div>
      <div class="card product">
             <img class="home product-image" src="assets/product2.jpg"></img>
             <div>
                ...
             </div>
      </div>
      <div class="card product">
             <img class="home product-image" src="assets/product3.jpg"></img>
             <div>
                ...
             </div>
      </div>
   </div>
</div>

CSS

.cards {
    /* overflow: hidden; */
    overflow-y: auto;
    height: 525px;
}
.product-carousel {
    display: flex;
    width: 400px;
    height: 175px;
    overflow: hidden;
    overflow-x: scroll;
    position: relative;
}
.product-carousel > .card.product{
    width: 120px;
    height: 160px;
    justify-content: space-between;
    margin-left: 10px;
    position:relative;
    text-align: center;
}

Answer 1

我粘贴了它并且效果很好，虽然我可能误解了它。它应该以另一种方式工作吗？

我做了一个 JS fiddle，我添加了一些边框和图像来测试它。

编辑：我添加了一个 div 作为旋转木马的包装器，并设置宽度 100%、高度自动和 overflow-x: scroll

.cards {
   /* overflow: hidden; */
    overflow-y: auto;
    height: 525px;
    border: 1px solid purple;
}
.carousel-wrapper{
width: 100%;
height: auto;
overflow-x: scroll;
border: 2px solid green;
}
.product-carousel {
     background-image: url("https://www.freevector.com/uploads/vector/preview/30374/Colorful-Plait-Background.jpg");
     background-repeat: repeat;
    border: 1px solid red;
    display: flex;
    height: 175px;
    width: auto;
    float:left;
    position: relative;
}
.product-carousel > .card.product{
    border: 1px solid black;
    width: 120px;
    height: 160px;
    justify-content: space-between;
    margin-left: 10px;
    position:relative;
    text-align: center;
}

img{
    width: 100px; height: 100px;
}

p{
  color: purple;
  font-size: 20px;  
}

<div class="cards">
<div class="carousel-wrapper">
    <div class="product-carousel">
      <div class="card product">
             <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
             <div>
                ...
                </div>
      </div>
      <div class="card product">
             <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
             <div>
                ...
             </div>
      </div>
      <div class="card product">
             <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
             <div>
                ...
             </div>
      </div>
      <div class="card product">
        <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
        <div>
           ...
        </div>
 </div>
 <div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
     </div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
  </div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
  </div>
</div>
<div class="card product">
<img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
<div>
...
</div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
     </div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
  </div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
  </div>
</div>
<div class="card product">
<img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
<div>
...
</div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
     </div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
  </div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
  </div>
</div>
<div class="card product">
<img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
<div>
...
</div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
     </div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
  </div>
</div>
<div class="card product">
  <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
  <div>
     ...
  </div>
</div>
<div class="card product">
<img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
<div>
...
</div>
</div>
 <div class="card product">
    <img class="home product-image" src="https://images-na.ssl-images-amazon.com/images/I/61mSyjeYXWL._AC_UX679_.jpg"></img>
    <div>
       ...
    </div>
</div>
<p>product carousel</p>
   </div>
   </div>
   <p> parent </p>
</div>

Answer 2

在移动设备上将 .product-carousel 设置为 width: 100%; overflow: auto; /* or overflow-x: auto;*/

解释：

您的代码无效，因为 .card.product 不会溢出其容器 (.product-carousel)；

120px * 3 + 30px 边距 = 390px，容器为 400px，所以产品很适合放在那里；

其实是.product-carousel溢出了.cards（因为.cards得到浏览器window大小，而.product-carousel固定400px）。当浏览器 window 小于 400px .product-carousel 伸出 .cards;

这就是为什么只有当 .cards 上的溢出不是隐藏时才会出现滚动的原因。

.cards {
    height: 525px;
}
.product-carousel {
    display: flex;
    width: 100%;
    height: 175px;
    overflow: auto;
    position: relative;
}
.product-carousel > .card.product{
    width: 120px;
    height: 160px;
    justify-content: space-between;
    margin-left: 10px;
    position:relative;
    text-align: center;
}

希望对您有所帮助

滚动条不考虑 child div 中的溢出

Scrollbar not considering overflow in child div

html

css

overflow

carousel