Chrome-App-Webansicht und Touch-Scroll-Propagation

Lesezeit: 3 Minuten

Benutzer-Avatar
powski

Ich bin in der glücklichen Lage, eine Windows 8 Metro-App durch eine Chrome-Paket-App zu ersetzen. Vorerst muss es das Aussehen und Verhalten der Metro-App nachahmen. Die Hauptseite besteht aus mehreren Webansichten, die horizontal angeordnet sind, wobei eine große Menge an horizontalem Scrollen möglich ist. Beim Versuch, mit einem Touch-Gerät horizontal zu scrollen, ist ein Problem aufgetreten. Wenn die Scroll-Geste in einer Webansicht beginnt, erfasst sie das Scroll-Ereignis und verhindert, dass der Host scrollt. Überlauf ist in allen Webansichten ausgeblendet. Da sie den Großteil des Inhalts auf der Seite bilden, sind die gültigen Bildlaufziele für den Host begrenzt.

Die Webview-Inhalte sind interaktiv, daher kann ich nicht davonkommen, eine transparente Überlagerung über den scrollbaren Inhalt zu legen, um das Ereignis zu erfassen, zumindest nicht ohne eine Möglichkeit, die Klicks/Berührungen an die Webviews selbst weiterzugeben.

Irgendwelche Ideen, wie dies erreicht werden könnte?

Danke für Ihre Hilfe!

  • Vielleicht fällt jemandem etwas ein, aber ich habe meine Zweifel, dass dies möglich ist. Sie könnten versuchen, verschiedene Event-Handler an die Webviews anzuhängen, um zu sehen, ob Sie die Events nach oben weitergeben können.

    – Mark Rochkind

    12. August 2014 um 13:13 Uhr

  • Ja, so sieht es leider aus. Ich habe es geschafft, Scrollen mit einem Overlay zum Laufen zu bringen, und kann Klickkoordinaten zur Ausführung an Webviews senden. Es schränkt die Funktionalität der Webview-Inhalte ein, aber es ist ein Anfang. Immer noch viel mehr Spaß als das Schreiben für winJS!

    – powski

    13. August 2014 um 21:50 Uhr

  • Ich weiß, dass diese Frage alt ist, aber aus meiner Erfahrung werden Webansichten oder Unterelemente mit scrollbarem Inhalt gescrollt und die Weitergabe des Ereignisses gestoppt, bis sie einen scrollbaren Bereich haben. Und wenn der scrollbare Bereich fertig ist, werden die Elemente das Ereignis an die übergeordneten Elemente weitergeben. Daher können Sie den scrollbaren Inhalt von Webansichten einfach ausblenden oder deaktivieren, wenn ein Scroll-Ereignis beginnt, was dazu beiträgt, das Scroll-Ereignis an den Hauptrahmen weiterzugeben.

    – Fatih

    22. Februar 2015 um 20:11 Uhr

  • @Elle Dies war eine schädliche Bearbeitung und wurde zurückgesetzt. Ein Webview ist ein Fachbegriff, der sich hier speziell auf a bezieht <webview> Schild.

    – Xan

    28. Mai 2015 um 9:05 Uhr

Ich gehe hier von ein paar Dingen aus: Das Gestalten einer Chrome-App ähnelt dem Gestalten einer Webseite. Ihre aktuelle Bildlauflösung basiert auf der Verwendung von overflow:hidden und der ausschließlichen Verwendung von JavaScript zum Bildlauf.

Ich habe einmal etwas Ähnliches für eine Seite behoben. Es ist seltsam, aber ich habe gelernt, dass bei Touch-Geräten eine Bildlaufleiste unsichtbar ist, es sei denn, der Benutzer interagiert damit. Wenn Sie den Stil in overflow-x: scroll… ändern, wird eine Bildlaufleiste angezeigt (und Sie müssen sich später für den Desktop mit Modernizr oder einer ähnlichen Methode darum kümmern, um ein berührungsfähiges Gerät zu erkennen). Kommentieren Sie dann Ihren Scrolling-Code aus (vorübergehend natürlich, weil Sie ihn für Non-Touch benötigen). Wenn es mit der Überlaufänderung und der Scrolipt-Änderung gut scrollt, müssen Sie als Nächstes nur die Berührung erkennen und das Skript bedingt einschalten und den Überlauf entsprechend ändern.

  • Eine Sache noch. Es ist möglich, dass bei einigen Geräten die Bildlaufleiste immer noch sichtbar ist. Muss nur testen.

    – DarthDerrr

    26. Juli 2015 um 22:58 Uhr

Wenn Sie jQuery verwenden können, um dies zu erreichen, machen Sie es so, wenn der Cursor ist nicht Zusätzlich zu den Webviews wird das Scrolling-Ereignis auf die Seite selbst angewendet.

1246120cookie-checkChrome-App-Webansicht und Touch-Scroll-Propagation

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy