Question

首先，我要说的是，我已经查找了这个问题，并且发现了确实相关的问题（例如overflow-y:visible not working when overflow-x:hidden is present）：稍后，在对问题进行解释之后，再讨论这个问题。

为简单起见，我正在使用transform: translateX()和overflow-x: hidden CSS属性创建一个滑块；结果如下（也在此处-> https://codepen.io/Gesma94/pen/eaMBJN）：

let currTranslate = 0;

const slider = document.getElementById("slider");
const btLeft = document.getElementById("bt1");
const btRight = document.getElementById("bt2");

btLeft.addEventListener("click", () => {
  currTranslate -= 5;
  
  if (currTranslate < -200) {
    currTranslate = 0;
  }
  slider.style.transform = `translateX(${currTranslate}px)`;
});

btRight.addEventListener("click", () => {
  currTranslate += 5;
  
  if (currTranslate > 0) {
    currTranslate = 0;
  }
  slider.style.transform = `translateX(${currTranslate}px)`;
});

#container {
  display: flex;
}

#bt1, #bt2 {
  height: 30px;
}


#div1 {
  display: flex;
  width: 240px;
  overflow-x: hidden;
  overflow-y: visible;
}

#slider {  
    flex-shrink: 0;
    display: inline-flex;
}

.box {
  width: 100px;
  height: 100px;
  background: blue;
  position: relative;
}

.box +.box {
  margin-left: 10px;
}

#abs {
  position: absolute;
  bottom: -25px;
  color: red;
}

<div id="container">
  <button id="bt1">Left</button>
    <div id="div1">
      <div id="slider">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box">
          <div id="abs">
            Absolute in slider
          </div>
        </div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
    </div>
  <button id="bt2">Right</button>
</div>

如您所见，通过单击“左”和“右”按钮，我可以移动滑块，可以通过更改translateX() CSS属性中的值来获得该滑块。此外，为了隐藏容器外部的内容，我使用了overflow-X: hidden。
不过，我希望在Y轴上可见溢出：例如，第三项的内部绝对位置为<div>；您会看到，因为出现了滑块上的滚动条，这当然是不好的。

因此，回到相关问题，我了解到这是与overflow CSS属性有关的问题：如果overflow-y或overflow-x设置为{{1} }，那么另一个溢出会自动设置为visible。
虽然，我还读到，可以使用包装器auto来“诱骗”这种行为，该包装器仅隐藏一个轴溢出。。但是，我尝试了很多类似的组合，但包装器'`不同，但是我什么都做不了。

您认为可以在滑块中解决此问题吗？还是原因不明？

谢谢。

当x轴隐藏在滑块中时，y轴溢出

0 个答案: