溢出-x 仅隐藏

Question

我得到了包装上有 overflow:hidden 的 bx-slider。我的布局规定，一个元素应该脱离盒子并位于顶部边缘之上。

听起来一点也不难 - 这就是 overflow-y 和 x 的用途。我想。但无论我做什么，一旦我将其中一个值设置为隐藏，另一个值（x 或 y）也会被隐藏。

我做了一个模拟滑块的测试用例。我只想在包装盒外以全尺寸显示灰色元素。下一个元素在流入视口之前不应显示。

.wrapper {
  margin: 50px auto;
  width:400px;
  overflow-x:hidden;
}

.sliderContainer {
  width:1400px;
}

.sliderElement {
  width:400px;
  height:200px;
  background-color:red;
  display:inline-block;
  margin-right:50px;
}

.breakoutElement {
  width:50px;
  height:50px;
  background-color:grey;
  margin: -25px auto 0 auto;
}

<div class="wrapper">
  <div class="sliderContainer">
  
  <div class="sliderElement">
    <div class="breakoutElement"></div>
  </div>
    
  <div class="sliderElement"></div>
  <div class="sliderElement"></div>
  
  </div>
</div>

Answer 1

在包装器中添加填充而不是边距。试试这个

.wrapper {
  margin: auto auto;
  padding:50px 0px;
  width:400px;
  display:block;
  overflow-x:hidden;
}

.sliderContainer {
  width:1400px;
}

.sliderElement {
  width:400px;
  height:200px;
  background-color:red;
  display:inline-block;
  margin-right:50px;
}

.breakoutElement {
  width:50px;
  height:50px;
  background-color:grey;
  margin: -25px auto 0 auto;
}

<div class="wrapper">
  <div class="sliderContainer">
  
  <div class="sliderElement">
    <div class="breakoutElement"></div>
  </div>
    
  <div class="sliderElement"></div>
  <div class="sliderElement"></div>
  
  </div>
</div>

Answer 2

此行为的原因是根据 the W3C spec:

[...] some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.

您只需为幻灯片元素添加上边距并相应地调整它们的大小即可：

.sliderElement {
  ...
  height: 175px;
  margin-top: 25px;
  ...
}

如果您希望幻灯片恰好为 200 像素，只需调整包装高度即可。

.wrapper {
  margin: 50px auto;
  width: 400px;
  overflow-x: hidden;
}

.sliderContainer {
  width: 1400px;
}

.sliderElement {
  width: 400px;
  height: 175px;
  background-color: red;
  display: inline-block;
  margin-right: 50px;
  margin-top: 25px;
}

.breakoutElement {
  width: 50px;
  height: 50px;
  background-color: grey;
  margin: -25px auto 0 auto;
}

<div class="wrapper">
  <div class="sliderContainer">

    <div class="sliderElement">
      <div class="breakoutElement"></div>
    </div>

    <div class="sliderElement"></div>
    <div class="sliderElement"></div>

  </div>
</div>

有关溢出问题的详细信息，请参阅 this post。

溢出-x 仅隐藏

Overflow-x hidden only

html

css

overflow