Vertical-Scrolling with overflow:hidden to hide scrollbars - Ignore overflow for some content

Question

To disable vertical scrolling, overflow-x: auto; overflow-y: hidden; is commonly used.
My problem is, that inside the container with overflow:hidden, there is some content that should be visible, but still not be in the regular document flow (because it is going to be a dropdown menu).
Positioning this item results in the text which exceeds the height to be hidden (because of it's parent container overflow).

How to solve this?

I created a codepen to demonstrate the issue. Text in number 4 is clipped. How to avoid that?

Scrollable Menu:

Desired Dropdown Behaviour:

Current, clipped dropdown content:

So you mention that the plan is for the content that is overflowing to be a dropdown menu. Is the plan that they click on the box that is #4 and the menu shows below the box that you are scrolling? — OMGDrAcula
– OMGDrAcula, Commented Aug 11, 2022 at 18:49
yes exactly. I can add a screenshow of how it actually looks if it helps, I just tried to slim down the code. — Leviathan
– Leviathan, Commented Aug 11, 2022 at 18:54
Okay I gotcha. A screenshot would help for sure. But to touch on why what is happening is happening. While you did it for the most part the way to do it since the div is inside the overflow-y hidden wrapper, it gets hidden because it is a child. Even with using absolute positioning it is still relative to its' parent. So that is why it still gets hidden even though it is absolute. If you can give me a screenshot of how the open state is I can suggest some stuff for sure! — OMGDrAcula
– OMGDrAcula, Commented Aug 11, 2022 at 19:14
I edited the original post with the images. And yeah thank you for the explanation, I understand why this is happening. Unfortunately, I can't wrap my head around on how to fix it. Feels like an either or to me, but surely there has to be a way? — Leviathan
– Leviathan, Commented Aug 11, 2022 at 19:46

OMGDrAcula · Accepted Answer · 2022-08-12 12:27:08Z

2

So here is something that I hope helps you out. Absolute positioning gets wonky especially when the content overflows the body. So even though you used position absolute on the submenu the body was not tall enough to compensate hence the issue with the scrollbar appearing.

I built a rough example for you. I wrapped a ul in a header and set the body to 100% height. Then made each li a set width and height with an absolute positioned div inside that sits below the parent li. You can see that there is no scroll.

I hope this helps a bit! I know it isn't a sure fire answer.

var scrollNav = document.getElementById('scrollNav');
var menu = document.getElementById('menu');
var offset = 0;

scrollNav.addEventListener('click', function() {
   offset = offset - 100;
   menu.style.marginLeft = offset+"px";
   console.log(offset);
});

body, html {
    height:100%;
}
body {
    margin:0;
}

header {
  width: 100%;
  height: 100%;      
  overflow-x: hidden;
  position: relative;
}

#scrollNav { 
position: absolute;
right:0;
top: 50%;
margin: 0;
transform: translateY(-50%);
height: 100px;
}

#menu {
display: flex;
    align-items: center;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 1000px;
    transition: all 0.3s;
    list-style: none;
}

#menu li {
  width: 100px;
  position: relative;
   height: 100px;
    background-color: red;
}

.submenu {
  //display:none;
  position: absolute;
  z-index: 999;
  top: 100%;
  left: 0;
  width: 150px;
  height: 200px;
  background-color: lightblue;
}

<header>
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7<div class="submenu"><span>Submenu</span></div></li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button id="scrollNav">Scroll Nav</button>
</header>

edited Aug 12, 2022 at 12:27

answered Aug 11, 2022 at 20:44

OMGDrAcula

1,0643 gold badges11 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Leviathan Over a year ago

Edit queue is full - could you please edit your code snippet and add a ";" after "height: 100%" for the .header? This looks promising I'll fiddle around with it!

OMGDrAcula Over a year ago

Sorry for slow reply. Should be updated!

Collectives™ on Stack Overflow

Vertical-Scrolling with overflow:hidden to hide scrollbars - Ignore overflow for some content

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related