Mobile Safari: Disable scrolling pages “out of screen”

Question

I want to block scrolling page \"out of the iPhone screen\" (when gray Safari\'s background behind the page border is visible). To do this, I\'m cancelling touchmove event:

Answer 1

From what I understand of your question, you've attempted to combine the code you've presented above with the code snippet provided by Ross Boucher on Posterous. Attempting to combine these two snippets back-to-back won't work, because in disabling touchmove, you've also disabled the shim that allows mousemove to work via his sample.

This question and its answers sketch out a workable solution to your problem. You should try these two snippets to see if they resolve your issue:

This snippet, which disables the old scrolling behavior:

elementYouWantToScroll.ontouchmove = function(e) {
    e.stopPropagation();
}; 

Or this one, from the same:

document.ontouchmove = function(e) {
    var target = e.currentTarget;
    while(target) {
        if(checkIfElementShouldScroll(target))
            return;
        target = target.parentNode;
    }

    e.preventDefault();
};

Then, drop in the code on Posterous:

function touchHandler(event)
{
    var touches = event.changedTouches,
        first = touches[0],
        type = "";
         switch(event.type)
    {
        case "touchstart": type = "mousedown"; break;
        case "touchmove":  type="mousemove"; break;        
        case "touchend":   type="mouseup"; break;
        default: return;
    }

             //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //           screenX, screenY, clientX, clientY, ctrlKey, 
    //           altKey, shiftKey, metaKey, button, relatedTarget);

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                              first.screenX, first.screenY, 
                              first.clientX, first.clientY, false, 
                              false, false, false, 0/*left*/, null);

                                                                                 first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

And that should do it for you. If it doesn't, something else isn't working with Mobile Safari.

Answer 2

Unfortunately I haven't had the time to check out to above yet but was working on an identical problem and found that the nesting of elements in the DOM and which relation you apply it to affects the handler a lot (guess the above solves that, too - 'var target = e.currentTarget').

I used a slightly different approach (I'd love feedback on) by basically using a class "locked" that I assign to every element which (including all its children) i don't want the site to scroll when someone touchmoves on it.

E.g. in HTML:

<header class="locked">...</header>
<div id="content">...</div>
<footer class="locked"></div>

Then I have an event-listener running on that class (excuse my lazy jquery-selector):

$('.ubq_locked').on('touchmove', function(e) {
  e.preventDefault();
});

This works pretty well for me on iOs and Android and at least gives me the control to not attach the listener to an element which I know causes problems. You do need to watch your z-index values by the way.

Plus I only attach the listener if it is a touch-device, e.g. like this:

function has_touch() {
  var isTouchPad = (/hp-tablet/gi).test(navigator.appVersion);
  return 'ontouchstart' in window && !isTouchPad;
}

This way non-touch devices will not be affected.

If you don't want to spam your HTML you could of course just write the selectors into an array and run through those ontouchmove, but I would expect that to be more costly in terms of performance (my knowledge there is limited though). Hope this can help.