Let's say we want to make a webapp feel like a native app with Add to Home Screen. One of the first steps is to disable the default scrolling. Easy, right?
// window or document
window.addEventListener(touchmove, function(event) {
// no more scrolling
event.preventDefault();
}, false);
That's all fine and dandy until you add overflow-scrolling to the mix. To be precise, on iOS it would be -webkit-overflow-scrolling: touch.
/* #scrollable happens to be a ul */
#scrollable {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
By adding event prevention, hardware-accelerated scrolling in a container does not function, clearly not the intended effect.
The obvious solution looks something like this:
// you could do this for multiple elements, of course
var scrollable = document.querySelector(#scrollable);
scrollable.addEventListener(touchmove, function(event) {
// no more bubbling :)
event.stopPropagation();
}, false);
This solution introduces a problem, however, if you try to scroll left or right in #scrollable, it reverts back to the default scroll listener. Clearly, then, you should monitor the events to see if the touchmove event is tracking left or right, right? Unfortunately, no, as it will also, under circumstances I don't entirely understand, revert to the default scroll listener when scrolling vertically in the container.
Now what? To make matters worse, we would ideally be able to handle click or click-like events on the individual lis (read: touchstart):
var items = scrollable.querySelectorAll(#scrollable li);
for (var item = 0; item < items.length; item++) {
items[item].addEventListener(touchstart, function() {
// handle the touch start
}, false);
}
To fix this problem, we could turn to simply using click events, but that defaults the goal of making the webapp feel native due to the delay between tapping and response. To solve this, we'll add an event listener for touchstart and touchend:
var items = scrollable.querySelectorAll(#scrollable li);
var activeItem = null, startTouch = null;
for (var item = 0; item < items.length; item++) {
items[item].addEventListener(touchstart, function(event) {
startTouch = event.touches[0];
activeItem = this;
}, false);
items[item].addEventListener(touchend, function(event) {
var touch = event.changedTouches[0];
var deltaX = touch.pageX - startTouch.pageX
var deltaY = touch.pageY - startTouch.pageY;
// require the touchstart to be within 10 pixels of the touchend
if (deltaX * deltaX + deltaY * deltaY <= 100)
// handle click event
}, false);
}
That's all fine and good, but we still haven't solved the problem with default page scrolling taking control of some touchmove events. Any ideas?
