CODEWITHSUNDEEP
javascripthtmlcssmacosoverscroll
Luke Taylor
Luke Taylor

Reputation: 9561

Extend element to overscroll area on OS X

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.

Upvotes: 3

Views: 588

Answers (1)

ghost_dad
ghost_dad

Reputation: 1306

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>

Upvotes: 1

Related Questions