When users scroll to the top or bottom of a mobile browser page, they usually encounter a default behavior that leaves white space and causes the whole page to bounce back. In iOS applications, it's easy to add images and interactive elements to these areas, but I was curious if the same could be done for web applications.
I attempted to set a background image for html,body, like so:
html, body {
background: url(../img/topnotification.jpg) no-repeat top center;
background-size: contain;
}
Unfortunately, this approach didn't work as expected since the entire body was being over-scrolled. Is there perhaps a special property that can be used to style the top and bottom empty over-scroll areas in mobile websites?
I also experimented with:
html:before, body:before {
width: 100%;
height: 100%;
top: -100%;
position: absolute;
background: url(../img/topnotification.jpg) no-repeat top center;
background-size: contain;
overflow: visible;
}
However, this method also proved unsuccessful.