How to make inner element scroll in a fixed outer element with CSS or JavaScript?

396
December 15, 2016, at 1:56 PM

In other words, is there someway to "detach" inner(child) elements from their outer(parent) elements? That way, when you scroll, the outer(parent) element stays the put but the inner(child) element scrolls.

Maybe this is backwards thinking, and if it is please tell me and I'll try to solve this problem from a different perspective.

EDIT

Sorry, I should have been more specific. The problem I'm encountering with Foundation's off-canvas side navigation panel is that it doesn't stay fixed. Given that it, necessarily, has to encapsulate ng-scope, I thought I could tell it to stay fixed while ng-scope scrolls. Problem is that when I do that everything stays fixed, even when I adjust ng-scope's overflow to auto or scroll

Answer 1

This is the simplest example that I can think of:

.outer {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  overflow: scroll;
}

Example here:

http://codepen.io/anon/pen/JYedRo

READ ALSO
How to gracefully override the old css with a new css by jQuery?

How to gracefully override the old css with a new css by jQuery?

I have a div element, with css-->class 1, like the following codes:

342
Loading Facebook Page Plugin JavaScript Asynchronously

Loading Facebook Page Plugin JavaScript Asynchronously

Loading custom Facebook plugin makes site slower according to Google Page InsightsThere Page Speed Insight shows: "Enable compression of 8 Facebook sub JavaScript" under the hood of Should Fix menu

423
jquery widget loops through all inputs

jquery widget loops through all inputs

I'm trying to create my first jquery widget that adds an 'x' to clear inputsIt works but it's very slow once I click on the 'x' to clear the input

335
Can't unhide div tags after hiding them

Can't unhide div tags after hiding them

I'm trying to dynamically show and hide the contents of div tags based on whether a <ul> inside each one has all it's elements hidden or notI can successfully hide and show individual <li> elements based on the search, as well as hide the whole div if the <ul>...

209