6

In a Cordova iPad App for iOS7, I have a DIV (.scrollContainer) with fixed height into which I'm putting some much taller content, and I'm allowing that contained content to scroll like this:

.scrollContainer
{
    width: 512px;
    height: 546px;
    overflow: hidden;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
    background-color: #fff !important;
}

#content
{
    width: 512px;
    background-color: #fff;
}

The user can scroll the nested content nicely in the touch interface, but the user can also scroll 'past' the end of the content above or below as per the iOS 7 interface (i.e. it snaps back when they let go).

The background colour revealed as they over-scroll is black. Is there any way to set this to a different colour using CSS?

Ade
  • 2,961
  • 4
  • 30
  • 47
  • I'm looking for a similar solution on mac desktop. http://stackoverflow.com/questions/22477729/css-style-window-background-beyond-page-on-mac-possible i guess it should be possible to mimic the behaviour with javascript and the scrollhandler. – GDmac Mar 18 '14 at 11:45

1 Answers1

14

Faced the same problem today (iOS 7.1), seems like a glitch or something,

Adding borders or padding seems to fix it, allowing you to set a background color for the element itself. I sorted it out with this trick:

padding-top:1px;
margin-top:-1px;

Another solution would be to leave background unset on .scrollContainer element, and set it for its parent.

Andrea Tondo
  • 479
  • 7
  • 16