Override overflow on nested element

Question

I want to avoid, that a user scroll the background when my mobile navbar is opened. That is no problem so far, just set overflow: hidden on body. The problem is, if the navbar has so many items, that it's higher than the users viewport, it won't scroll too. So I want to be able to scroll within the navbar but not on the body at the same time.

The question is thus: Is it possible to change the overflow behavior of an nested element?

Simplified example

// simple helper to add many list items
var menu = document.getElementById('menu');
for(var i=0; i<100; i++) menu.innerHTML += '<li>foo</li>';

.scroll-disabled { overflow: hidden; }
.scroll-enabled { overflow: visible; }

<body class="scroll-disabled">
  <ul class="scroll-enabled" id="menu">
    <!-- lots of li's // more than the display can show at once-->
  </ul>
</body>

Alon Eitan · Accepted Answer · 2015-11-25 20:24:47Z

3

You can give the element fixed height and set auto scroll on overflow:

.scroll-enabled {height: 100px; overflow:auto;}

answered Nov 25, 2015 at 20:24

Alon Eitan

12k8 gold badges51 silver badges61 bronze badges

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

Comments

DavidDomain · Accepted Answer · 2015-11-25 20:55:21Z

2

Just use max-height: 100vh with overflow: auto. That way you don't have to set a fixed height and scrolling will only appear when the menu height is greater than the view port.

// simple helper to add many list items
var menu = document.getElementById('menu');
for(var i=0; i<100; i++) menu.innerHTML += '<li>foo</li>';

.scroll-disabled { overflow: hidden; }
.scroll-enabled {
  overflow: auto;
  max-height: 100vh;
}

<body class="scroll-disabled">
  <ul class="scroll-enabled" id="menu">
    <!-- lots of li's // more than the display can show at once-->
  </ul>
</body>

Here an example with the menu not exceeding the view port height.

// simple helper to add many list items
var menu = document.getElementById('menu');
for(var i=0; i<8; i++) menu.innerHTML += '<li>foo</li>';

.scroll-disabled { overflow: hidden; }
.scroll-enabled {
  overflow: auto;
  max-height: 100vh;
}

<body class="scroll-disabled">
  <ul class="scroll-enabled" id="menu">
    <!-- lots of li's // more than the display can show at once-->
  </ul>
</body>

edited Nov 25, 2015 at 20:55

answered Nov 25, 2015 at 20:48

DavidDomain

15.3k4 gold badges44 silver badges52 bronze badges

6 Comments

boop Over a year ago

That is perfect! Thank you

Pui Ho Lam Over a year ago

if the element is not the entire screen but a sub component, giving it a fixed height like this will lead to it having incorrect height. And if you want the scrollbar to show up on that element, you get another scrollbar on the main page.

DavidDomain Over a year ago

@PuiHoLam I am not really sure what your trying to achieve, but I posted this answer a long time ago and the OP accepted it as the correct answer. Maybe you should post your own question so that someone can help you with your problem?

Pui Ho Lam Over a year ago

Not seeking an answer, just putting it here so random people don't believe everything they see on the internet.

DavidDomain Over a year ago

@Pui Ho Lam You're obviously describing a complete different situation. The OPs question did not mention a "a sub component", there are plenty of answers on SO to what you are describing though, oh and not to mention that the expression "component" in this context is somewhat misleading. If you are truly concerned about other people consuming the wrong information, you should post an alternative answer which addresses the issue? That way others could upvote it and it would show a solution to a similar problem for those who come here with the exact same issue. It could be helpful.

|

Gaurav Aggarwal · Accepted Answer · 2015-11-25 20:27:11Z

1

For this you have to define a fix height of ul.scroll-enabled and then use overflow:auto also so it can scroll within the ul.

Here is a fiddle example for the same :)

answered Nov 25, 2015 at 20:27

Gaurav Aggarwal

10.2k8 gold badges42 silver badges76 bronze badges

Collectives™ on Stack Overflow

Override overflow on nested element

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related