webentwicklung-frage-antwort-db.com.de

Scrollen in einer iPhone-Webanwendung deaktivieren?

Gibt es eine Möglichkeit, das Scrollen von Webseiten in einer iPhone-Web-App vollständig zu deaktivieren? Ich habe zahlreiche Dinge ausprobiert, die auf Google gepostet wurden, aber keine scheint zu funktionieren.

Hier ist meine aktuelle Header-Konfiguration:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<meta name="Apple-mobile-web-app-capable" content="yes"/>

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

scheint nicht zu funktionieren.

57
Stefan Kendall

'self.webView.scrollView.bounces = NO;'

Fügen Sie diese Zeile einfach in 'viewDidLoad' der Datei mainViewController.m Ihrer Anwendung ein. Sie können es im Xcode öffnen und hinzufügen. 

Auf diese Weise sollte die Seite ohne Gummiband-Sprünge immer noch das Scrollen in der App-Ansicht ermöglichen. 

10
Chait

Wechseln Sie zum Ereignis touchstart anstelle von touchmove. Unter One Finger Events gibt an, dass während eines Schwenks keine Ereignisse gesendet werden, sodass touchmove möglicherweise zu spät ist.

Ich habe den Listener zum Dokument hinzugefügt, nicht zum Hauptteil.

Beispiel:

document.ontouchstart = function(e){ 
    e.preventDefault(); 
}
56
drawnonward
document.addEventListener('touchstart', function (e) {
    e.preventDefault();
});

Verwenden Sie die ontouchmove-Eigenschaft nicht zum Registrieren des Ereignishandlers, da Sie Gefahr laufen, vorhandene Ereignishandler zu überschreiben. Verwenden Sie stattdessen addEventListener (siehe den Hinweis zu IE auf der MDN-Seite).

Beachten Sie, dass durch das Verhindern des Standardwerts für das Ereignis touchstart für die Variablen window oder document das Scrollen der absteigenden Bereiche deaktiviert wird.

Um das Scrollen des Dokuments zu verhindern und alle anderen Ereignisse beizubehalten, verhindern Sie die Standardeinstellung für das erste touchmove-Ereignis, das auf touchstart folgt:

var firstMove;

window.addEventListener('touchstart', function (e) {
    firstMove = true;
});

window.addEventListener('touchmove', function (e) {
    if (firstMove) {
        e.preventDefault();

        firstMove = false;
    }
});

Der Grund dafür ist, dass mobile Safari die erste Bewegung verwendet, um festzustellen, ob der Hauptteil des Dokuments gescrollt wird. Ich habe dies erkannt, während ich eine komplexere Lösung gefunden habe.

Für den Fall, dass dies nicht mehr funktioniert, besteht die komplexere Lösung darin, das touchTarget-Element und seine übergeordneten Elemente zu überprüfen und eine Anfahrtsskizze zu erstellen, zu der ein Bildlauf möglich ist. Verwenden Sie dann das erste touchmove -Ereignis, um die Bildlaufrichtung zu ermitteln, und prüfen Sie, ob durch das Dokument oder das Zielelement (oder eines der übergeordneten Zielelement) ein Bildlauf durchgeführt wird:

var touchTarget,
    touchScreenX,
    touchScreenY,
    conditionParentUntilTrue,
    disableScroll,
    scrollMap;

conditionParentUntilTrue = function (element, condition) {
    var outcome;

    if (element === document.body) {
        return false;
    }

    outcome = condition(element);

    if (outcome) {
        return true;
    } else {
        return conditionParentUntilTrue(element.parentNode, condition);
    }
};

window.addEventListener('touchstart', function (e) {
    touchTarget = e.targetTouches[0].target;
    // a boolean map indicating if the element (or either of element parents, excluding the document.body) can be scrolled to the X direction.
    scrollMap = {}

    scrollMap.left = conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollLeft > 0;
    });

    scrollMap.top = conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollTop > 0;
    });

    scrollMap.right = conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollWidth > element.clientWidth &&
               element.scrollWidth - element.clientWidth > element.scrollLeft;
    });

    scrollMap.bottom =conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollHeight > element.clientHeight &&
               element.scrollHeight - element.clientHeight > element.scrollTop;
    });

    touchScreenX = e.targetTouches[0].screenX;
    touchScreenY = e.targetTouches[0].screenY;
    disableScroll = false;
});

window.addEventListener('touchmove', function (e) {
    var moveScreenX,
        moveScreenY;

    if (disableScroll) {
        e.preventDefault();

        return;
    }

    moveScreenX = e.targetTouches[0].screenX;
    moveScreenY = e.targetTouches[0].screenY;

    if (
        moveScreenX > touchScreenX && scrollMap.left ||
        moveScreenY < touchScreenY && scrollMap.bottom ||
        moveScreenX < touchScreenX && scrollMap.right ||
        moveScreenY > touchScreenY && scrollMap.top
    ) {
        // You are scrolling either the element or its parent.
        // This will not affect document.body scroll.
    } else {
        // This will affect document.body scroll.

        e.preventDefault();

        disableScroll = true;
    }
});

Der Grund dafür ist, dass mobile Safari die erste Berührung verwendet, um festzustellen, ob der Dokumenttext gescrollt wird oder ob das Element (oder eines der übergeordneten Zielelemente) an dieser Entscheidung festhält.

15
Gajus

Wenn Sie jquery 1.7+ verwenden, funktioniert das gut:

$("donotscrollme").on("touchmove", false);
13
Rob Lauer

Das sollte funktionieren. Keine grauen Bereiche mehr oben oder unten :)

<script type="text/javascript">
   function blockMove() {
      event.preventDefault() ;
}
</script>

<body ontouchmove="blockMove()">

Dadurch werden jedoch auch scrollbare Bereiche deaktiviert. Wenn Sie Ihre scrollbaren Bereiche beibehalten und den Gummibandeffekt oben und unten noch entfernen möchten, finden Sie hier: https://github.com/joelambert/ScrollFix .

12
kaleazy

Deaktivieren: 

document.ontouchstart = function(e){ e.preventDefault(); }

Aktivieren:

document.ontouchstart = function(e){ return true; }
10

Die Seite muss vom Startbildschirm aus gestartet werden, damit das Meta-Tag funktioniert.

4
Freebie
document.ontouchmove = function(e){ 
    e.preventDefault(); 
}

ist eigentlich die beste Wahl, die ich herausfand, es erlaubt Ihnen immer noch, Eingabefelder zu tippen und Objekte mit der jQuery-Benutzeroberfläche ziehen zu können, aber das Scrollen der Seite wird angehalten.

1
Josh Bedo

Ich habe die obigen Antworten ausprobiert und vor allem die von Gajus, aber keine funktioniert. Schließlich habe ich die Antwort unten gefunden, um das Problem so zu lösen, dass nur der Hauptteil nicht scrollt, sondern alle anderen Bildlaufabschnitte in meiner Web-App funktionieren. Einfach festgelegte Position für Ihren Körper einstellen: 

body {

height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
0
TheeBen