2

I've illustrated the problem I'm describing in a Codepen here: https://codepen.io/anon/pen/KZOwdm?editors=1111

I have a title bar at the top of my page that with a fixed position at the top of the page (position: fixed;).

The main content of my page is a scrollable list with a margin-top to make sure it stays below the title bar. Clicking on any of these items brings in a slide-up, which is a position: fixed; div with z-index: 2; that covers the whole page from just below the title bar down to the bottom of the screen.

I'm having problems with scroll on this slide-up. I expect that scrolling over the slide-up would scroll only that div's content, rather than the entire page (including the contents underneath). This is especially frustrating when the contents underneath are very long. What I'm seeing is that once scrolling completes on the slide-up, the parent div starts scrolling.

In a typical scenario, this slide-up would be meant to cover the page, sort of like displaying a "new page". So, I would not expect the parent div to come into the equation at all when scrolling over the slide-up div. The second problem here is that scrolling on a mobile device seems to only scroll the parent, not the slide-up. How can this be accomplished?

Jim
  • 4,509
  • 16
  • 50
  • 80

1 Answers1

2

You require two things:

  1. overflow-y: scroll on .slide-up in order to allow the contents to actually scroll
  2. A height small enough to allow the text to actually overflow the total height
    (not just what is visible).

Adding overflow-y: scroll and changing the height of .slide-up to calc(100% - 40px) (which accommodates for the top) showcases this in the following example:

.tabs {
  position: fixed;
  top: 0;
  height: 40px;
  background: #f54;
  width: 100%;
  color: white;
  padding-left: 1em;
  display: flex;
  align-items: center;
  z-index: 2;
}

.slide-up {
  z-index: 2;
  top: 40px;
  position: fixed;
  background-color: #ffa000;
  height: calc(100% - 40px);
  width: 100px;
  left: 100px;
  color: #fff;
  overflow-y: scroll;
}
<div class='tabs'>
  <h5>Tabs</h5>
</div>
<div class='content'>
  <h5>Here is some random text to make this scroll</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
  <h5>This is the main content</h5>
</div>
<div class='slide-up'>
  <h5>Slide up content</h5>
  <h5>Slide up content</h5>
  <h5>Slide up content</h5>
  <h5>Slide up content</h5>
  <h5>Slide up content</h5>
  <h5>Slide up content</h5>
  <h5>Slide up content</h5>
  <h5>Slide up content</h5>
  <h5>Slide up content</h5>
  <h5>Slide up content end</h5>
</div>

Hope this helps! :)

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • Hey, thanks for the response! This still seems to fall victim to the fact that the parent starts scrolling when we've reached the end (at least on my machine). Can this be helped? – Jim Jan 26 '18 at 03:06
  • That's because you would reach the end of the child content, and the parent element would gain 'focus'. It's possible to prevent that through JavaScript if truly necessary, though fairly cumbersome. Doing that is covered fairly extensively in [**this question**](https://stackoverflow.com/questions/5802467/prevent-scrolling-of-parent-element) :) – Obsidian Age Jan 26 '18 at 03:10