Overflowing y-axis when x-axis is hidden in a Slider

Question

First, let me say that I've looked up this problem and I found indeed related questions (e.g. overflow-y:visible not working when overflow-x:hidden is present): will come back on this later, after the explanation of the problem.

To make it simple, I'm creating a slider using transform: translateX() and overflow-x: hidden CSS properties; the result is the following (also here -> 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>

As you can see, by clicking on the "Left" and "Right" button I can move the slider, which is obtained change the value in translateX() CSS property. Moreover, to hide what's outside the container, I use overflow-X: hidden.
Though, I would like to have the overflow on Y-axis visible: for example, the third item has an inner <div> absolute positioned; you see that, because of that the scrollbar on the slider appear, which is of course no good.

So, going back to the related questions, I've understood that this is a problem related to overflow CSS property: if overflow-y or overflow-x is set to visible, then the other overflow is automatically set to auto.
Though, I've also read that this behavior can be somehow "tricked" using a wrapper <div> which hide just one axis overflow.. But, I've tried like tons of combinations, with different wrapper '`, but I couldn't achieve anything.

Do you think it's possible to fix this problem in my slider? Or it's a lost cause?

Thanks.

Overflowing y-axis when x-axis is hidden in a Slider

0 Answers0