iOS/WebKit: touchmove/touchstart, die nicht am input & textarea

Ich habe ein IOS-Web-App können nicht gescrollt werden. Aus diesem Grund möchte ich deaktivieren scrollen. Um dies zu tun, ich benutze ein element ist ontouchmove-Attribut, und haben Sie eine Funktion aufrufen, verwendet element.preventDefault.
Allerdings bin ich nicht in der Lage zu erkennen und zu berühren-Ereignis aus, wenn es beginnt, auf eine textarea oder ein input-element, auch wenn das element deaktiviert ist! Ich habe auch versucht, die Bindung der touchmove oder touchstart-event auf diese Elemente über JavaScript addEventlistener, ohne Erfolg!

Und hier mein JavaScript:

function onBodyLoad() {

 document.addEventListener( "touchstart", doNotScroll, true );
 document.addEventListener( "touchmove", doNotScroll, true );

}

function doNotScroll( event ) {

 event.preventDefault();
 event.stopPropagation();

}

Vielen Dank für jede Hilfe!!!

  • Ich kam mit einer Teillösung: mobweb.ch/... - Noch auf der Suche nach etwas besserem tho!
InformationsquelleAutor Louis B. | 2010-11-14
  1. 11

    Ich glaube, ich habe gefunden ein großer workaround für dieses Problem mit dem "pointer-events" CSS-Eigenschaft:

    function setTextareaPointerEvents(value) {
    var nodes = document.getElementsByTagName('textarea');
    for(var i = 0; i < nodes.length; i++) {
        nodes[i].style.pointerEvents = value;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    setTextareaPointerEvents('none');
});

document.addEventListener('touchstart', function() {
    setTextareaPointerEvents('auto');
});

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    setTextareaPointerEvents('none');
});

document.addEventListener('touchend', function() {
    setTimeout(function() {
        setTextareaPointerEvents('none');
    }, 0);
});

    Damit wird Mobile Safari auf iOS (andere nicht getestet bisher) ignoriert die Texteingabefelder für scrollen, sondern ermöglicht es, Fokus etc. wie üblich.

    • Mein held! Funktioniert auf Safari und Chrome für das iPad.
    • Ist das immer noch eine gültige Lösung? Ich verwendet Dotgreg die jQuery-Implementierung und während es erlaubt es Ihnen zu Blättern, Sie kann nicht den Fokus der Eingänge. Beachten Sie die form in Frage in einer Fancybox lightbox v2, nur um dem Elend. Getestet auf einem 6 Plus mit iOS 10 und auf BrowserStack auf eine 7 mit iOS10.
    • Diese Lösung funktioniert nur in dem Sinne, dass es ermöglicht es Ihnen, Tippen Sie auf ein input-und ein scrollen, aber es macht es unmöglich, sich zu konzentrieren, den input, die Art von Niederlagen der Zweck. Die richtige Lösung für die Erhaltung erwartete Verhalten (d.h. die Fähigkeit zu starten, scrollen auch auf einem input-element und konzentrieren sich immer noch das input-element) ist das hinzufügen -webkit-overflow-scrolling: touch; zu Ihrem html oder body tag. Siehe hier für mehr
    InformationsquelleAutor Thomas Bachem
  2. 2

    den Thomas Bachem Antwort ist die eine!

    Ich schrieb es in jQuery. Fügen Sie einfach eine Klasse scrollFix zu Ihrem gewünschten Eingänge und Sie sind bereit zu gehen. Oder befestigen Sie die event-Handler, um alle ein-und Texteingabefelder mit $('input, textarea').

    Jetzt, wenn Sie Tippen und scrollen auf eine Eingabe auf iOS 8+, der Eingang bekommen alle Ihr pointer-events deaktiviert (einschließlich dem problematischen Verhalten). Diese pointer-events aktiviert sind, wenn wir feststellen, dass eine einfache Berührung.

    $('.scrollFix').css("pointer-events","none");

$('body').on('touchstart', function(e) {
    $('.scrollFix').css("pointer-events","auto");
});
$('body').on('touchmove', function(e) {
    $('.scrollFix').css("pointer-events","none");
});
$('body').on('touchend', function(e) {
    setTimeout(function() {
        $('.scrollFix').css("pointer-events", "none");
    },0);
});
    InformationsquelleAutor Dotgreg
Schreibe einen Kommentar