Deaktivieren Sie das Scrollen, wenn Sie ein bestimmtes Element berühren

Ich habe eine Seite mit einem Abschnitt, in dem eine Zeichnung skizziert werden kann. Die Touchmove-Ereignisse, zumindest die vertikalen, scrollen jedoch auch durch die Seite (was das Skizzieren beeinträchtigt), wenn sie in einem mobilen Browser verwendet werden. Gibt es eine Möglichkeit, entweder a) das Scrollen der Seite zu deaktivieren und wieder zu aktivieren (damit ich sie deaktivieren kann, wenn jede Zeile gestartet wird, aber nach jeder Zeile wieder einschalten kann) oder b) die Standardbehandlung von zu deaktivieren Touchmove-Ereignisse (und vermutlich das Scrollen), die auf die Leinwand gehen, auf der die Skizze gezeichnet ist (ich kann sie nicht einfach vollständig deaktivieren, da sie beim Skizzieren verwendet werden)?

Ich habe für die Skizze jquery-mobile vmouse-Handler verwendet, wenn das einen Unterschied macht.

Update : Wenn ich auf einem iPhone die zu skizzierende Leinwand auswähle oder vor dem Zeichnen nur ein wenig mit dem Finger halte, wird die Seite nicht gescrollt und nicht aufgrund von irgendetwas, das ich auf der Seite codiert habe.

Setzen Sie die CSS-Eigenschaft touch-action auf none, die auch mit passiven Ereignis-Listenern funktioniert :

touch-action: none;

Das Anwenden dieser Eigenschaft auf ein Element löst nicht das Standardverhalten (Bildlauf) aus, wenn das Ereignis von diesem Element ausgeht .

Hinweis: Wie in den Kommentaren von @nevf erwähnt, funktioniert diese Lösung aufgrund von Leistungsänderungen möglicherweise nicht mehr (zumindest in Chrome) . Es wird empfohlen, dies zu verwenden, touch-actionwas auch in der Antwort von @ JohnWeisz vorgeschlagen wird .

Ähnlich wie bei der Antwort von @Llepwryd habe ich eine Kombination aus ontouchstartund verwendet ontouchmove, um das Scrollen zu verhindern, wenn es sich auf einem bestimmten Element befindet.

Entnommen wie es ist aus einem meiner Projekte:

window.blockMenuHeaderScroll = false;
$(window).on('touchstart', function(e)
{
    if ($(e.target).closest('#mobileMenuHeader').length == 1)
    {
        blockMenuHeaderScroll = true;
    }
});
$(window).on('touchend', function()
{
    blockMenuHeaderScroll = false;
});
$(window).on('touchmove', function(e)
{
    if (blockMenuHeaderScroll)
    {
        e.preventDefault();
    }
});

Im Wesentlichen höre ich beim Start der Berührung zu, um zu sehen, ob sie mit jQuery an einem Element beginnt, das einem anderen Kind untergeordnet ist, .closestund erlaube, dass die Berührungsbewegung beim Scrollen ein- und ausgeschaltet wird. Das e.targetbezieht sich auf das Element, mit dem der Touch-Start beginnt.

Sie möchten die Standardeinstellung für das Touch-Move-Ereignis verhindern, müssen jedoch auch Ihre Markierung am Ende des Touch-Ereignisses löschen, da sonst keine Touch-Scroll-Ereignisse funktionieren.

Dies kann ohne jQuery erreicht werden. Für meine Verwendung hatte ich jedoch bereits jQuery und musste nichts codieren, um festzustellen, ob das Element ein bestimmtes übergeordnetes Element hat.

Getestet in Chrome auf Android und einem iPod Touch ab dem 18.06.2013

Es gibt einen kleinen "Hack" in CSS, mit dem Sie auch das Scrollen deaktivieren können:

.lock-screen {
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: fixed;
}

Durch Hinzufügen dieser Klasse zum Textkörper wird das Scrollen verhindert.

document.addEventListener('touchstart', function(e) {e.preventDefault()}, false);
document.addEventListener('touchmove', function(e) {e.preventDefault()}, false);

Dies sollte das Scrollen verhindern, aber es werden auch andere Berührungsereignisse unterbrochen, sofern Sie keine benutzerdefinierte Methode zum Behandeln dieser Ereignisse definieren.

Die ultimative Lösung wäre Einstellung overflow: hidden;auf document.documentElementetwa so:

/* element is an HTML element You want catch the touch */
element.addEventListener('touchstart', function(e) {
    document.documentElement.style.overflow = 'hidden';
});

document.addEventListener('touchend', function(e) {
    document.documentElement.style.overflow = 'auto';
});

Durch die Einstellung overflow: hiddenbeim Start der Berührung wird alles, was über das Fenster hinausgeht, ausgeblendet, wodurch die Verfügbarkeit zum Scrollen aufgehoben wird (kein zu scrollender Inhalt).

Nach touchenddem Sperren kann durch Setzen overflowauf auto(der Standardwert) freigegeben werden .

Es ist besser, dies anzuhängen, <html>da dies <body>möglicherweise zum Stylen verwendet wird und Kinder sich unerwartet verhalten können.

BEARBEITEN: Info touch-action: none;- Safari unterstützt es laut MDN nicht .

Versuchen Sie, den Überlauf auf dem Objekt zu verbergen, das Sie nicht scrollen möchten, während ein Berührungsereignis stattfindet. Setzen Sie z. B. den Überlauf beim Start ausgeblendet und am Ende wieder auf Auto.

Hast Du es versucht ? Es würde mich interessieren, ob dies funktionieren würde.

document.addEventListener('ontouchstart', function(e) {
    document.body.style.overflow = "hidden";
}, false);

document.addEventListener('ontouchmove', function(e) {
    document.body.style.overflow = "auto";
}, false);

Ich fand, dass das ev.stopPropagation();für mich funktioniert hat.

Zu meiner Überraschung funktioniert die Methode "prepareDefault ()" für mich unter dem neuesten Google Chrome (Version 85) unter iOS 13.7. Es funktioniert auch auf Safari auf demselben Gerät und auch auf meinem Android 8.0-Tablet. Ich habe es derzeit für die 2D-Ansicht auf meiner Website hier implementiert: https://papercraft-maker.com