滚动条不考虑子 div 中的溢出答案

【问题标题】：Scrollbar not considering overflow in child div滚动条不考虑子 div 中的溢出
【发布时间】：2020-08-23 01:52:39
【问题描述】：

我正在尝试制作一个部分位于屏幕之外并且可以滚动的产品轮播，以模拟移动设备的组件。

滚动条不会到 product-carousel 类的末尾，但如果我从 card 类中删除隐藏的溢出，我可以看到父 div 底部有一个滚动条可以正常工作。我想将此行为移至轮播。

我需要做什么才能在轮播而不是父 div 下看到正确的滚动条？滚动父 div 会显示背景，我只想让产品向左/向右滑动。

滚动条不考虑溢出

轮播的宽度正确

从卡片父级中删除溢出后，会显示正确的行为，但对于父级（请参见底部的小滚动条）

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

【问题讨论】：

标签： html css overflow carousel

【解决方案1】：

我粘贴了它，它工作正常，虽然我可能误解了它。它应该以另一种方式工作吗？

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

编辑：我添加了一个 div 作为轮播的包装器，并将宽度设置为 100%、高度自动和溢出-x：滚动

.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>

【讨论】：

感谢您的努力！ +1 有一个关键区别是我的孩子超出了父母（孩子的宽度）。这可能是个问题吗？
我尝试在您的示例中为父级设置较低的宽度，滚动条看起来很奇怪，但它会起作用。所以我想我需要回到绘图板上。 i.imgur.com/WKulFsI.png
我想我现在明白了。我编辑了小提琴。我放了另一个 div (carousel-wrapper)，它是具有滚动条的那个。它可能需要一些调整，但请检查这是否是您正在寻找的。span>

【解决方案2】：

在手机上设置.product-carousel 到width: 100%; overflow: auto; /* or overflow-x: auto;*/

解释：

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

120px * 3 + 30px 边距 = 390px，容器有 400px，所以产品非常适合；

实际上是.product-carousel 溢出了.cards（因为.cards 获得了浏览器窗口大小，而.product-carousel 固定为400px）。当浏览器窗口小于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;
}

希望对你有帮助

【讨论】：

感谢您的努力！不幸的是，它有点弄乱了轮播格式（所有东西都压在一起），上面的答案解决了这个问题。