时间戳

首页 > 解决方案 > 溢出滚动隐藏但不是内容

css - 溢出滚动隐藏但不是内容

问题描述

通常我认为自己在 css 方面表现不错，但现在我不知道如何解决这个问题。你可以看到红色圆圈，我的问题是它被隐藏了50％。我需要放overflow-x:scroll，然后我不想在 y 上看到滚动条。这甚至可能吗。我试图尽可能少地编写代码，所以我希望它不会太难通过。谢谢你的帮助！

.ak{
    width:100%;
    height: 125px;
    display: -webkit-inline-box;
    overflow-x: scroll;
    overflow-y:hidden;
    margin-top: 30px;
}
.actBox{
    width:380px;
    height: 125px;
    display: flex;
    background-color: #F5F5F5;
    border-right: 5px solid #FFB26A;
    margin-right: 10px;

}
.actCircle{
    width: 60px;
    height: 60px;
    border-radius: 55px;
    border: 1px solid rgba(197, 197, 197, 0.2);
    background-color: red;
    position:relative;
    margin-left:-40px;
    margin-top:-25px;
}
.actImg{
    width: 140px;
    background: center center no-repeat;
    background-size: cover;
    position: relative;
    background-position: center;
    height: 125px;
}
.actText{
    width:240px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
 .tacken{
    width: 90%;
    height: 30px;
    border: double 0.12em transparent;
    border-radius: 10px;
    background-image: linear-gradient(white, white), 
                      linear-gradient(to right, #FFABAB, #FFB26A);
    background-origin: border-box;
    background-clip: content-box, border-box;
    display:flex;
    justify-content:center;
    text-align:center;
    margin-bottom: 20px;
  }
<div class="ak">
  <div class="actBox">
    <div class="actImg" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=48);">
    </div>
    <div class="actCircle">
    </div>
    <div class="actText">
       <h3>Content </h3>
       <h4>Content</h4>      
    </div>
 </div>


  <div class="actBox">
    <div class="actImg" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=48);">
    </div>
    <div class="actCircle">
    </div>
    <div class="actText">
       <h3>Content </h3>
       <h4>Content</h4>      
    </div>
 </div>
</div>

标签： css

解决方案

Since you specified a height on your ak element you could just add a new div around the whole thing. In this case lets call it box

.box{
width: 100%;
height: 178px;
overflow-x: scroll;
}

Now you got a new element which i scrollable and just a bit bigger than your first element. Now you could just clearify that you want the overflow-y to be visible at your ak element.

.ak{
width:100%;
height: 125px;
display: -webkit-inline-box;
margin-top: 30px;
overflow-y: visible;
}

And if I understood you correctly the result looks like this:

.box{
    width: 100%;
    height: 178px;
    overflow-x: scroll;
}
.ak{
    width:100%;
    height: 125px;
    display: -webkit-inline-box;
    margin-top: 30px;
    overflow-y: visible;
}
.actBox{
    width:380px;
    height: 125px;
    display: flex;
    background-color: #F5F5F5;
    border-right: 5px solid #FFB26A;
    margin-right: 10px;

}
.actCircle{
    width: 60px;
    height: 60px;
    border-radius: 55px;
    border: 1px solid rgba(197, 197, 197, 0.2);
    background-color: red;
    position:relative;
    margin-left:-40px;
    margin-top:-25px;
}
.actImg{
    width: 140px;
    background: center center no-repeat;
    background-size: cover;
    position: relative;
    background-position: center;
    height: 125px;
}
.actText{
    width:240px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
 .tacken{
    width: 90%;
    height: 30px;
    border: double 0.12em transparent;
    border-radius: 10px;
    background-image: linear-gradient(white, white), 
                      linear-gradient(to right, #FFABAB, #FFB26A);
    background-origin: border-box;
    background-clip: content-box, border-box;
    display:flex;
    justify-content:center;
    text-align:center;
    margin-bottom: 20px;
  }
<div class = "box">

<div class="ak">
  <div class="actBox">
    <div class="actImg" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=48);">
    </div>
    <div class="actCircle">
    </div>
    <div class="actText">
       <h3>Content </h3>
       <h4>Content</h4>      
    </div>
 </div>


  <div class="actBox">
    <div class="actImg" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=48);">
    </div>
    <div class="actCircle">
    </div>
    <div class="actText">
       <h3>Content </h3>
       <h4>Content</h4>      
    </div>
 </div>
</div>
</div>

推荐阅读