12

In iOS Safari, when you scroll to the bottom of a web page, you are able to sort of "lift" the page up by trying to scroll again. I assume this is to assure the user that they have reached the end of the page. This area is empty and white by default. Is there a way to style this area with CSS? I'd like to add a background image if only to add flair. And since everyone else is asking how to prevent the overscrolling, I wanted to know if I could actually use it for something. I tried adding a background image to the body tag and fixing it to the bottom but it wasn't visible through the overscroll. I feel like it might be impossible as it is part of Safari itself, and the webpage (and its control) has already ended.

jdgregson
  • 1,329
  • 15
  • 35
  • I think question, http://stackoverflow.com/questions/22477729/css-style-window-background-beyond-page-on-mac-possible, may be what your looking for. Sadly it sounds like that you don't have any control over it. – James McMahon Jun 21 '16 at 04:06

2 Answers2

8

A few years later and I have found that this is (sort of) possible, using fixed positioning and z-indexes. Assuming your content height is greater than your screen height and your content is wrapped in a div, if you put something in another div with the following class it should appear in the iOS overscroll area:

.ios-peek {
    position: fixed;
    z-index: -1;
    bottom: 0;
    left: 0;
}

And here is a proof-of-concept page which seeks to accomplish this even with content that is shorter than the screen height:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
* {
    margin: 0;
}

#content {
    min-height: 100vh;
    height: 100%;
    background-color: #fff;
}

#bottom-text {
    position: absolute;
    bottom: 0;
}

.ios-peek {
    position: fixed;
    z-index: -1;
    bottom: 0;
    left: 0;
}
</style>
</head>
<body>
    <div id="content">
        <h1>Blah</h1>
        <p>Blah blah blah blah blah blah blah blah blah...</p>
    </div>
    <div id="bottom-text">
        <h3>You're at the bottom, nothing else to see...</h3>
    </div>
    <div class="ios-peek">
        <h1>hi there</h1>
    </div>
</body>
</html>
jdgregson
  • 1,329
  • 15
  • 35
  • This works nicely! My app has different colors for top and bottom fixed panels, so defining a single theme color wouldn't work. On initial iPhone test, I now see a custom color in the space that opens up when you hit the extreme of iOS elastic scrolling. – MarsAndBack Dec 11 '21 at 14:15
1

I know this is an old topic but it still came up first on my search results.

As of lately safari uses the "theme-color" meta tag for this.

For example if you use multiple themes:

  <meta name="theme-color" content="#f6f8fa" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#161b22" media="(prefers-color-scheme: dark)">
mathiasb
  • 104
  • 3
  • 11