Partially disabling scroll bounce in full screen iOS web app
===

Can anyone help with the following problem please?

I have a simple fullscreen web application which comprises a header and a scrollable list.

I've applied:

    overflow: scroll;
    -webkit-overflow-scrolling: touch;

to the scrollable element and I've applied the following javascript:

    document.addEventListener("touchmove", function (e) {
        e.preventDefault();
    }, false);
    
    var theWrapper = document.getElementById("wrapper");
    theWrapper.ontouchmove = function(e){
      console.log(e);
      e.stopPropagation();
      e.stopImmediatePropagation();
		// e.preventDefault();
    };

in an attempt to prevent the scroll bounce from occurring.

This has been partly successful in that if you try and scroll from the header the giveaway web app bounce doesn't happen but if you scroll the list to its extremities (ie. scrollUp when at the top of the list or scrollDown when at the bottom of the list) it seems the scroll thing bubbles up and the whole app does the scroll bounce. 

I've made a demo on JS Bin so you can experience the behaviour for yourselves (iPhone/iPad only sorry - it will work as normal on a desktop browser):

http://jsbin.com/opetom/4/

Add the demo to your iphone home screen for best results.

Many thanks in advance for any help that you can provide. It's really frustrating and I'm sure this must be a common problem.

