滚动条在子 div 中不考虑溢出问题

问题描述 投票：0回答：1

我试图让产品的旋转木马有一部分在屏幕之外，并且可以滚动，以模拟移动设备的一个组件。

滚动条并没有走到product-carousel类的末尾，但是如果我从卡片类中去掉溢出隐藏，我可以看到在父div的底部有一个滚动条，它会正确地行为。我想把这种行为移到转盘中。

我需要做什么才能在旋转木马下看到正确的滚动条，而不是在父div下？滚动父 div 的结果是显示背景，我只是想让产品向左向右滑动。

滚动条不考虑溢出

Scrollbar not considering overflow

旋转木马有正确的宽度

Div has a higher width then shown

从卡的父卡中移除溢出后，正确的行为会显示出来，但对于父卡来说（见底部的小滚动条）。

If I remove overflow hidden from the card class I see that there the scrollbar would act correctly. I would like to move this behavior to the child div

超文本标记语言

<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个回答
1
投票

我把它粘贴了，它工作得很好，虽然可能是我理解错了。应该用别的方式工作吗？

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

EDIT：我添加了一个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
投票

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

解释：

你的代码没有工作，因为 .card.product 不溢出其容器（.product-carousel);

120px * 3 + 30px margin = 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;
}

希望能帮到你

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.