iOS Deaktivieren, Seite Scrollen bei overflow-scrolling: touch

Also sagen wir, wir wollen eine webapp fühlen Sie sich wie eine native app mit "Hinzufügen zum Home-Bildschirm". Einer der ersten Schritte ist, deaktivieren Sie das standardmäßige scrollen. Einfach, nicht wahr?

//window or document
window.addEventListener("touchmove", function(event) {
    //no more scrolling
    event.preventDefault();
}, false);

Das ist alles schön und gut bis Sie overflow-scrolling in den mix. Um genau zu sein, auf iOS-es wäre -webkit-overflow-scrolling: touch.

/* #scrollable happens to be a ul */
#scrollable {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

Durch hinzufügen von Ereignis-Prävention, die hardware-beschleunigtes scrollen in einem container funktioniert nicht, eindeutig nicht die beabsichtigte Wirkung.

Ist die offensichtliche Lösung sieht wie folgt aus:

//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);

Diese Lösung führt zu einem problem, jedoch, wenn Sie versuchen, einen Bildlauf nach Links oder rechts in #scrollable es wird wieder die Standard-scroll-Hörer. Klar, dann sollten Sie überwachen die Ereignisse, um zu sehen, wenn die touchmove Ereignis-tracking-Links oder rechts, richtig? Leider Nein, es wird auch, unter Umständen, die ich nicht so ganz verstehen, wieder auf die Standard-scroll-listener beim scrollen vertikal in den Behälter.

Was nun? Noch schlimmer zu machen, würden wir idealerweise in der Lage sein zu handhaben click oder klicken Sie-wie die Ereignisse auf die einzelnen lis (Lesen: 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);
}

Um dieses problem zu beheben, könnten wir drehen einfach die Verwendung click Veranstaltungen, aber, dass Ausfälle das Ziel, dass die webapp "fühlen" native aufgrund der Verzögerung zwischen Tippen und Reaktion. Um dieses Problem zu lösen, wir werden fügen Sie einen Ereignis-listener für touchstart und 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);
}

Das ist alles schön und gut, aber wir haben immer noch nicht das problem gelöst mit Standard-Blättern, die Kontrolle über einige touchmove Veranstaltungen. Irgendwelche Ideen?