CODEWITHSUNDEEP
htmlcss
Leviathan
Leviathan

Reputation: 656

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

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:
how the menu looks

Desired Dropdown Behaviour:
Dropdown

Current, clipped dropdown content:
current behaviour

Upvotes: 0

Views: 92

Answers (1)

OMGDrAcula
OMGDrAcula

Reputation: 1064

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>

Upvotes: 2

Related Questions