Is there a way to style the iOS Safari overscroll/elastic scroll area?

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. As 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.

Solution

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>