Extend element to overscroll area on OS X

Question

I've got a page with a fixed background, and a floating footer at the bottom.

Because of "overscrolling" on OS X, a user can scroll past the bottom of the page, at which point the background is exposed below the footer. Instead of disabling overscroll for my page, I simply want to extend the bottom div below the bottom of the page to cover the background.

How can I do this without increasing the page height? If I adjust the size of the div, the scrollable area just expands to match. I've seen this question, but that involves hiding the element, which would mean it no longer covered the background.

Is there a way to hide elements in the overscroll region, below the page?

Here's a GIF:

You can see the background displaying below the white region at the bottom of the screen when you "overscroll". I don't want to prevent over scrolling, but I want to hide the background with a white div at the bottom of the page.

@DOCTYPEHTML Thanks. I'll look into that, but I suspect it's a side-effect of [the library I'm using for the background](https://github.com/jnicol/particleground) — Luke Taylor, Jun 21 '16 at 01:49
what about disabling this bounce effect http://stackoverflow.com/questions/8150191/disable-elastic-scrolling-in-safari — , Jun 21 '16 at 02:11
You should probably rephrase your question (or at least the title) to explain better what you want to do rather than how you think you might like to do it. Something like "Extend element to fill overscroll area on OS X" — Phil, Jun 21 '16 at 02:11
@DOCTYPEHTML I want to keep the bounce effect, but not have the background show under it. — Luke Taylor, Jun 21 '16 at 11:29

ghost_dad · Answer 1 · 2016-06-24T03:25:45.843

Without seeing a fiddle, my first thought would be to do exactly what you mentioned: increase the height of the bottom div to cover the excess scrolling. Like so:

.bottom-container {
  position: relative;
  height: /* current height + overflow amount of height */
  top: /* overflow amount of height */
}

So if your bottom container is 400px:

.bottom-container {
  position: relative;
  height: 600px;
  top: 200px;
}

Something like that should work in theory, as long as there's no overflow: hidden applied to the page.

body {
  margin: 0;
  padding: 0;
}
.fixed-background {
  position: fixed;
  height: 100vh;
  width: 100%;
  background: tomato;  
}
.fixed-placeholder {
  height: 100vh;
  background: transparent;
}
.bottom-container {
  position: relative;
  height: 400px;
  width: 100%;
  background: white;
  top: 200px;
}

<div class="fixed-background">
  <h1>Fixed Background</h1>
</div>
<div class="fixed-placeholder"></div>
<div class="bottom-container">
  <h2>More content down here</h2>
</div>

Extend element to overscroll area on OS X

1 Answers1