Question

通常我认为自己在 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>

Answer 1

因为您在 ak 元素上指定了高度，所以您只需在整个元素周围添加一个新的 div。在这种情况下，我们称之为 box

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

现在你有了一个新元素，我可以滚动它并且比你的第一个元素大一点。现在您可以明确表示您希望在 ak 元素中显示溢出-y。

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

如果我理解正确，结果如下所示：

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

Answer 2

可能会有帮助

在浏览器中隐藏滚动条（仍可滚动）

/* Webkit */
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Firefox */
html {
  scrollbar-width: none;
}

溢出滚动隐藏但不是内容

2 个答案: