iPad Scroller Issue

This fiddle is an example of how mobile Safari has a bug in that developers cannot stop a native scroll event from happening. And, if there's a override to the touch event on an object, the scroll event won't start unless there's some delay to the touch event.

by Tony Zampogna

HTML

<div class="outer-wrapper">
    <ul id="list1" class="list">
        <li id="1" class="list-item">blah blah blah blah</li>
        <li id="2" class="list-item">blah blah blah blah</li>
        <li id="3" class="list-item">blah blah blah blah</li>
        <li id="4" class="list-item">blah blah blah blah</li>
        <li id="5" class="list-item">blah blah blah blah</li>
        <li id="6" class="list-item">blah blah blah blah</li>
        <li id="7" class="list-item">blah blah blah blah</li>
        <li id="8" class="list-item">blah blah blah blah</li>
        <li id="9" class="list-item">blah blah blah blah</li>
        <li id="10" class="list-item">blah blah blah blah</li>
        <li id="11" class="list-item">blah blah blah blah</li>
        <li id="12" class="list-item">blah blah blah blah</li>
        <li id="13" class="list-item">blah blah blah blah</li>
        <li id="14" class="list-item">blah blah blah blah</li>
        <li id="15" class="list-item">blah blah blah blah</li>
        <li id="16" class="list-item">blah blah blah blah</li>
        <li id="17" class="list-item">blah blah blah blah</li>
        <li id="18" class="list-item">blah blah blah blah</li>
        <li id="19" class="list-item">blah blah blah blah</li>
        <li id="20" class="list-item">blah blah blah blah</li>
        <li id="21" class="list-item">blah blah blah blah</li>
        <li id="22" class="list-item">blah blah blah blah</li>
        <li id="23" class="list-item">blah blah blah blah</li>
        <li id="24" class="list-item">blah blah blah blah</li>
        <li id="25" class="list-item">blah blah blah blah</li>
        <li id="26" class="list-item">blah blah blah blah</li>
        <li id="27" class="list-item">blah blah blah blah</li>
        <li id="28" class="list-item">blah blah blah blah</li>
        <li id="29" class="list-item">blah blah blah blah</li>
    </ul>
    <ul id="list2" class="list">
        <li id="1" class="list-item">blah blah blah blah</li>
        <li...

CSS

.list {
	margin: 0 0 20px 0;
	padding: 0;
	list-style: none;
}
.list .list-item {
	width: 50%;
	padding: 10px;
	border: 1px solid black;
}
#list2.list .list-item {
	border: 1px solid blue;
}

JavaScript

var self = this;
var supportsTouch = (('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch);

//
// There's no way to cancel the scrolling events that are
// native in the iOS Safari browser.
//

//
// List 1 - Scrolling can never happen when swiping over this list.
//
$('#list1 .list-item').on('touchstart mousedown', function (event) {
    self.preventDefault = true;
    self.draggingTarget = event.target;
    self.startPageX = event.pageX;
    self.startPageY = event.pageY;
    if (event.type == 'touchstart') {
        self.startPageX = event.originalEvent.touches[0].pageX;
        self.startPageY = event.originalEvent.touches[0].pageY;
    }
});
$('#list1 .list-item').on('touchend mouseup', function (event) {
    self.preventDefault = false;
    self.draggingTarget = null;
    updatePosition(event.target, 0, 0);
});

//
// List 2 - Scrolling can happen when swiping over this list and
//          when it does, it can't be stopped.
//
$('#list2 .list-item').on('touchstart mousedown', function (event) {
    self.preventDefault = false;
    self.draggingTarget = event.target;
    self.startPageX = event.pageX;
    self.startPageY = event.pageY;
    if (event.type == 'touchstart') {
        self.startPageX = event.originalEvent.touches[0].pageX;
        self.startPageY = event.originalEvent.touches[0].pageY;
    }
});
$('#list2 .list-item').on('touchend mouseup', function (event) {
    self.preventDefault = false;
    self.draggingTarget = null;
    updatePosition(event.target, 0, 0);
});

//
// Handle the drag events.
//
$(document).on('touchmove mousemove', function (event) {
    var x = event.pageX - self.startPageX;
    var y = event.pageY - self.startPageY;
    if (event.type == 'touchmove') {
        x = event.originalEvent.touches[0].pageX - self.startPageX;
        y = event.originalEvent.touches[0].pageY - self.startPageY;
    }
    if (self.draggingTarget) {
        updatePosition(self.draggingTarget, x, y);
   ...