CODEWITHSUNDEEP
jqueryhtmlioscsscordova
Chet
Chet

Reputation: 19829

iOS HTML Web App (PhoneGap) over scrolling

This problem has been addressed several times on Stack Overflow, but not entirely.

The problem is that iOS allows you to "over-scroll" a webpage which looks terrible for the header and footer of a web app. A simple work-around is to prevent the browser from doing anything with 'touchmove'.

This is the simple hack (in Coffeescript):

$('body').on 'touchmove', (e) ->
  e.preventDefault()

Now, if you have content in-between your header and footer that needs to be scrolled, this is an issue, so you can have some simple logic to work around this:

$('body').on 'touchmove', (e) ->
  if not $('.content').has($(e.target)).length
    e.preventDefault()

A side note (just in case it happens to be relevant), a nice little trick to get momentum scrolling is this pit of CSS:

.content {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

The problem now is that if the current scroll position is at the top and I scroll up (pulling down), I overscroll and it pulls down the header. Same happens the other way. If the content view is scrolled to the bottom and I try to scroll further, the footer is pulled up and overscrolled. Now just to be clear, by scroll, I mean touch scrolling in the iPhone or iOS Simulator.

So the question is how do I prevent this overscrolling?

Its simple in pseudocode:

if at the top and scrolling up or at the bottom and scrolling down
  e.preventDefault

I'm having all kinds of trouble with this.

Upvotes: 0

Views: 416

Answers (1)

Dick van den Brink
Dick van den Brink

Reputation: 14499

You can disable this in the cordova config.xml

<preference name="DisallowOverscroll" value="true" />

When you put the above line in your config and create the build the overscroll feature is disabled! So no need for JavaScript to fix this.. phew!

Upvotes: 1

Related Questions