Bildlauf und Zoomen mit Fingereingabe

Hinweis  Die in diesem Abschnitt beschriebenen Eigenschaften werden unter Windows 7 nicht unterstützt.

Der Bildlauf (oder das Schwenken) und das Zoomen stellen bei Fingereingabeinteraktionen besonders wichtige Komponenten dar. Auf Webseiten und in Anwendungen, die die Fingereingabe unterstützen, werden der Bildlauf und das Zoomen eingesetzt, damit Benutzer auf mehr Inhalt zugreifen, durch die Elemente einer Liste navigieren oder mehr Details auf einem Foto anzeigen können und viel mehr.

Wenn Sie mehr darüber wissen müssen, welche Aktionen der Benutzer gerade ausführt, verwenden Sie Zeiger- und Gestikereignisse. Diese werden unter Zeiger- und Gestikereignisse genau beschrieben. In diesem Artikel werden die Methoden erläutert, mit denen Sie die Ansichten für Bildlauf und Zoomen Ihrer berührungsoptimierten Webseite in Internet Explorer 10 oder Ihrer Windows Store-App mit JavaScript in Windows 8 steuern können.

Aspekte, die Sie steuern können

Bildlauf- und Zoomansichten sind ein äußerst wichtiger Bestandteil der Fingereingabe. Der erste Eindruck, den ein Benutzer bei der Interaktion mit Ihrer Webseite oder App gewinnt, hängt davon ab, was passiert, wenn der Benutzer zum ersten Mal den Bildschirm berührt und den Finger darüber zieht. Vor diesem Hintergrund gibt es viele Details und Nuancen, die stimmen müssen, um eine optimale Benutzerfreundlichkeit zu gewährleisten.

Es gibt einige allgemeine Interaktionen, von denen die Benutzer erwarten, dass sie "einfach funktionieren". Dazu gehören:

  • Bildlauf (oder Schwenken) durch Berühren des Bildschirms und Ziehen des Fingers über den Bildschirm, um mehr Inhalt anzuzeigen
  • Zoomen durch Zusammendrücken der Finger zum Verkleinern und Aufziehen der Finger zum Vergrößern oder durch Doppeltippen auf ein Element der obersten Ebene (nur Internet Explorer in der neuen Windows-Benutzeroberfläche)
  • Trägheit, durch die der Bildlauf im Inhalt auf eine vorhersagbare Weise fortgesetzt wird, nachdem der Benutzer den Finger vom Bildschirm hebt
  • Inhaltsbereiche, die federn, wenn der Bereich, für den ein Bildlauf durchgeführt wird, an eine Grenzen stößt
  • In andere Bildlauf- oder Zoombereiche geschachtelte Bildlauf- oder Zoombereiche, die sich gemäß den Erwartungen der Benutzer verhalten
  • Andockpunkte, die, wenn sie an wichtigen Positionen festgelegt werden, den Benutzern das Erreichen dieser Positionen beim Bildlauf oder beim Zoomen erleichtern.
  • Steuerelemente, die sich nahtlos in Inhalte einfügen, für die ein Bildlauf oder ein Zoom durchgeführt wird; Schaltflächen und andere Schnittstellenelemente innerhalb des Inhalts müssen wie erwartet reagieren, ohne einen Bildlauf oder Zoom auszulösen

Glücklicherweise sind diese Funktionen unter Windows 8 sowohl in Internet Explorer 10 als auch in Windows Store-Apps mit JavaScript integriert. Viele dieser Interaktionen können Sie jedoch mithilfe verschiedener neuer Eigenschaften für Cascading Stylesheets (CSS) weiter anpassen.

Steuern des Bildlaufverhaltens

Mit den in diesem Abschnitt beschriebenen CSS-Eigenschaften können Sie das Bildlaufverhalten steuern.

Hinweis  Einen funktionierenden Beispielcode, in dem diese Eigenschaften enthalten sind, finden Sie unter Szenario 1: Schwenken – Steuern, was der Benutzer schwenken kann und auf der MSDN-Website in der Internet Explorer-Beispielgalerie im Beispiel für Bildlauf, Verschieben und Zoomen mit Fingereingabe.

Steuern des bildlauffähigen Bereichs

Mit den folgenden CSS-Eigenschaften können Sie die Größe des bildlauffähigen Bereichs festlegen. Diese Eigenschaften haben keine Auswirkung auf Elemente, für die kein Bildlauf durchgeführt werden kann.

EigenschaftBeschreibung

-ms-scroll-limit

Kompakteigenschaft, die die Werte für die Eigenschaften -ms-scroll-limit-x-min, -ms-scroll-limit-y-min, -ms-scroll-limit-x-max und -ms-scroll-limit-y-max angibt.

-ms-scroll-limit-x-max

Gibt den Höchstwert der Eigenschaft scrollLeft an.

-ms-scroll-limit-x-min

Gibt den Mindestwert der Eigenschaft scrollLeft an.

-ms-scroll-limit-y-max

Gibt den Höchstwert der Eigenschaft scrollTop an.

-ms-scroll-limit-y-min

Gibt den Mindestwert der Eigenschaft scrollTop an.

 

Steuern der Bildlaufmethoden

Mithilfe dieser CSS-Eigenschaft können Sie die Bildlaufmethoden — eine traditionelle Bildlaufleiste, eine automatisch ausgeblendete Bildlaufleiste oder nichts— für überlaufende Elemente steuern.

EigenschaftBeschreibung

-ms-overflow-style

Gibt die bevorzugten Bildlaufmethoden für überlaufende Elemente an.

 

Angeben von Bildlaufstrecken

Mit dieser CSS-Eigenschaft können Sie steuern, ob der Bildlauf auf die —vertikale oder horizontale— Bewegungsachse beschränkt ist oder dem Finger des Benutzers folgt, wodurch Freiformbildlauf ermöglicht wird.

EigenschaftBeschreibung

-ms-scroll-rails

Gibt an, ob der Bildlauf auf die primäre Bewegungsachse beschränkt ist.

 

Übersetzen der Mausradbewegung

Wenn JavaScript auf Mausrad-Dokumentobjektmodell (DOM)-Ereignisse lauscht, handelt es sich bei den Ereignissen, die ausgelöst werden, wenn der Benutzer einen vertikalen Bildlauf durchführt, immer um vertikale Bildlaufereignisse und nicht um horizontale Bildlaufereignisse. Gleichermaßen handelt es sich bei den Ereignissen, die ausgelöst werden, wenn der Benutzer einen horizontalen Bildlauf durchführt, immer um horizontale Bildlaufereignisse.

Mithilfe der folgenden CSS-Eigenschaft können Sie dieses Verhalten für vertikale Bildlaufereignisse ändern.

EigenschaftBeschreibung

-ms-scroll-translation

Gibt an, ob für das ausgewählte Element vertikale Mausradbewegungen in horizontale Mausradbewegungen übersetzt werden. Der Wert vertical-to-horizontal gibt an, dass vertikale Bildlaufereignisse als entsprechende horizontale Bildlaufereignisse gedeutet werden sollen, und der Wert none gibt an, dass keine Übersetzung der Mausradbewegung erfolgt.

 

Steuern des Zoomverhaltens

Mithilfe der hier beschriebenen CSS-Eigenschaften können Sie das Zoomverhalten steuern.

Hinweis  Einen funktionierenden Beispielcode, in dem diese Eigenschaften enthalten sind, finden Sie unter Szenario 3: Zoomen – Zulassen, dass der Benutzer den Inhalt eines Elements zoomen kann und auf der MSDN-Website in der Internet Explorer-Beispielgalerie im Beispiel für Bildlauf, Verschieben und Zoomen mit Fingereingabe.

Aktivieren des Zooms

Verwenden Sie die folgenden Eigenschaft, um anzugeben, ob das Zoomen für ein bestimmtes Element aktiviert werden soll. Diese Eigenschaft hat nur dann eine Auswirkung, wenn sowohl für die x- als auch für die y-Achse Überlauf erlaubt ist.

EigenschaftBeschreibung

-ms-content-zooming

Gibt an, ob der Zoom aktiviert ist.

 

Steuern des Zoomfaktors

Mit diesen CSS-Eigenschaften können Sie steuern, bis zu welchem Faktor ein Element gezoomt werden kann. Diese Eigenschaften haben keine Auswirkung auf Elemente, die nicht gezoomt werden können.

EigenschaftBeschreibung

-ms-content-zoom-limit

Kompakteigenschaft, die die Werte für die Eigenschaften -ms-content-zoom-limit-min und -ms-content-zoom-limit-max angibt.

-ms-content-zoom-limit-max

Gibt den maximalen Zoomfaktor an.

-ms-content-zoom-limit-min

Gibt den minimalen Zoomfaktor an.

 

Durch die oben genannten Eigenschaften wird der Zoomfaktor angegeben, indem die folgende DOM-Eigenschaft festgelegt wird:

EigenschaftBeschreibung

msContentZoomFactor

Gibt den Zoomfaktor für den Inhalt an.

 

Angeben des Verhaltens geschachtelter Inhalte, für die ein Bildlauf oder ein Zoom durchgeführt wird

Wenn ein Benutzer in einem Element, das in ein anderes zoomfähiges oder bildlauffähiges Element geschachtelt ist, ein Zoom- oder Bildlauflimit erreicht, können Sie angeben, ob das übergeordnete Element den im untergeordneten Element begonnenen Zoom- oder Bildlaufvorgang fortsetzen soll. Dies bezeichnet man als Verketten von Zoom- oder Bildlaufvorgängen.

Hinweis  Einen funktionierenden Beispielcode, in dem diese Eigenschaften enthalten sind, finden Sie unter Szenario 4: Verketten – Zusammenfügen von Elementen und auf der MSDN-Website in der Internet Explorer-Beispielgalerie im Beispiel für Bildlauf, Verschieben und Zoomen mit Fingereingabe.

Angeben von Verkettungsverhalten

Mit diesen CSS-Eigenschaften können Sie das Verkettungsverhalten angeben. Diese Eigenschaften haben keine Auswirkung auf Elemente, für die kein Zoom bzw. Bildlauf durchgeführt werden kann.

EigenschaftBeschreibung

-ms-content-zoom-chaining

Gibt das Zoomverhalten an, wenn ein Benutzer bei einer Manipulation das Zoomlimit erreicht.

-ms-scroll-chaining

Gibt das Bildlaufverhalten an, wenn ein Benutzer bei einer Manipulation das Bildlauflimit erreicht.

 

Festlegen des Standardverhaltens für die Fingereingabe

Mithilfe der hier beschriebenen CSS-Eigenschaft können Sie das Verhalten festlegen, das erlaubt ist, wenn ein Benutzer ein Element berührt — beispielsweise Bildlauf oder Zoom. Das Verhalten für die Fingereingabe wird dann auf dem am nächsten gelegenen Vorgängerelement ausgeführt, das dieses Verhalten unterstützt, wenn nicht ein zwischengeschaltetes Vorgängerelement angibt, dass das Verhalten nicht erlaubt ist.

Wenn kein Standardverhalten für die Fingereingabe aufgerufen wird, werden stattdessen DOM-Ereignisse für diesen Kontakt ausgelöst (siehe Zeiger- und Gestikereignisse).

Hinweis  Einen funktionierenden Beispielcode, in dem diese Eigenschaften enthalten sind, finden Sie unter Szenario 5: Fingereingabeaktionen – Abrufen von Ereignissen in Schwenk-/Zoomelementen und auf der MSDN-Website in der Internet Explorer-Beispielgalerie im Beispiel für Bildlauf, Verschieben und Zoomen mit Fingereingabe.

EigenschaftBeschreibung

-ms-touch-action

Gibt an, ob und wie ein bestimmter Bereich vom Benutzer manipuliert werden kann.

Nachfolgend finden Sie die möglichen Werte für diese Eigenschaft:

  • auto  Anfangswert. Gibt an, dass die für das Element erlaubten Verhaltensweisen für die Fingereingabe vom Browser festgestellt werden.
  • none  Das Element lässt keine standardmäßigen Verhaltensweisen für die Fingereingabe zu.
  • pan-x  Das Element lässt das fingereingabegesteuerte Schwenken (den fingereingabegesteuerten Bildlauf) auf der horizontalen Achse zu. Das Schwenken durch Fingereingabe wird auf dem am nächsten gelegenen Vorgänger mit horizontal bildlauffähigem Inhalt durchgeführt.
  • pan-y  Das Element lässt das fingereingabegesteuerte Schwenken (den fingereingabegesteuerten Bildlauf) auf der vertikalen Achse zu. Das Schwenken durch Fingereingabe wird auf dem am nächsten gelegenen Vorgänger mit vertikal bildlauffähigem Inhalt durchgeführt.
  • pinch-zoom  Das Element lässt Zoomen durch Zusammendrücken zu. Das Zoomen durch Zusammendrücken wird auf dem am nächsten gelegenen Vorgänger mit zoomfähigem Inhalt durchgeführt.
  • manipulation  Das Element lässt fingereingabegesteuerten Bildlauf und Zoomen durch Zusammendrücken zu. Dies ist die Kurzform von "pan-x pan-y pinch-zoom".
  • double-tap-zoom  Das Element lässt Zoomen durch Doppeltippen zu. Das Zoomen durch Doppeltippen wird auf der ganzen Seite ausgeführt. Das Zoomen durch Doppeltippen ist in Windows Store-Apps mit JavaScript nicht verfügbar.

 

Nehmen wir als Beispiel eine Anwendung oder eine Webseite, in bzw. auf der mit dem Finger gezeichnet wird. In diesem Fall ist es wichtig, dass sich die Canvas bei der Berührung und Manipulation durch den Benutzer nicht bewegt. Wenn das folgende Beispiel in das CSS-Element der Seite integriert wird und ein Benutzer diese Canvas berührt und den Finger bewegt, erfolgt keine Manipulation. Stattdessen werden DOM-Ereignisse gesendet.


canvas#fingerpainter {
  -ms-touch-action: none;
}

Nehmen wir nun ein Beispiel, in dem eine Liste erstellt wird, die in Richtung x schwenkt, jedoch dem Benutzer erlaubt, Elemente durch eine Ziehbewegung in Richtung y zu ziehen oder neu anzuordnen (ähnlich wie die Windows 8-Startseite). Wenn der Benutzer ein listEntry-Element berührt und den Finger in Richtung x zieht, schwenkt die Liste. Bewegt der Benutzer stattdessen den Finger in Richtung y, erfolgt kein Schwenken. Stattdessen werden DOM-Ereignisse gesendet.


div.list {
  overflow-x: scroll;
}

div.list > div.listEntry {
  -ms-touch-action: pan-x;
}

Erstellen von Andockpunkten für Inhalte

Wenn ein Benutzer einen Bildlauf oder Zoom durchführt und dann den bzw. die Finger von der Oberfläche hebt, sorgt die Trägheit dafür, dass der Bildlauf- oder Zoomvorgang fortgesetzt wird. Mithilfe von Andockpunkten können Sie genau einstellen, wo der Inhalt stehen bleibt, wenn die Trägheit nicht mehr wirkt.

Sie können Andockpunkte an Schlüsselpositionen im Inhalt erstellen, um die Wahrscheinlichkeit zu erhöhen, dass die jeweilige Schlüsselposition angezeigt wird, wenn die Trägheit nicht mehr wirkt. Erstellen Sie beispielsweise Bildlauf-Andockpunkte für eine bestimmte Überschrift, um die Wahrscheinlichkeit zu erhöhen, dass der Benutzer durch die trägheitsinduzierte Bewegung zu der Überschrift gelangt, während er ansonsten irgendwo in die Nähe der Überschrift gelangt wäre. Oder legen Sie Zoom-Andockpunkte für einen bestimmten Zoomfaktor fest, damit die Seite immer an diesem Zoomfaktor andockt, wenn ein Benutzer durch Doppeltippen zoomt.

Durch das Platzieren von Andockpunkten erleichtern Sie den Benutzern das Manipulieren des Inhalts und sorgen dafür, dass der Inhalt an geeigneten Stellen oder Schlüsselpositionen stehen bleibt.

Hinweis  Einen funktionierenden Beispielcode, in dem diese Eigenschaften enthalten sind, finden Sie unter Szenario 2: Festlegen und Konfigurieren von Andockpunkten und auf der MSDN-Website in der Internet Explorer-Beispielgalerie im Beispiel für Bildlauf, Verschieben und Zoomen mit Fingereingabe.

Bildlauf-Andockpunkte

Mit diesen CSS-Eigenschaften können Sie Bildlauf-Andockpunkte für Ihre Inhalte festlegen. Diese Eigenschaften haben keine Auswirkung auf Elemente, für die kein Bildlauf durchgeführt werden kann.

EigenschaftBeschreibung

-ms-scroll-snap-points-x

Legt fest, wo sich Andockpunkte auf der x-Achse befinden.

-ms-scroll-snap-points-y

Legt fest, wo sich Andockpunkte auf der y-Achse befinden.

-ms-scroll-snap-type

Legt fest, welche Art von Andockpunkt für das aktuelle Element verwendet wird — ein Näherungsandockpunkt (wenn der Inhalt durch normale Trägheit in der Nähe eines Andockpunkts angehalten würde, wird die Trägheit so angepasst, dass der Inhalt direkt am Andockpunkt anhält; es ist jedoch trotzdem möglich, zwischen zwei Andockpunkte zu gelangen) oder ein erforderlicher Andockpunkt (die Trägheit wird so angepasst, dass der Inhalt immer am Andockpunkt anhält und sich nie über diesen hinaus bewegt).

-ms-scroll-snap-x

Kompaktwert, der die Werte für die Eigenschaften -ms-scroll-snap-type und -ms-scroll-snap-points-x angibt.

-ms-scroll-snap-y

Kompaktwert, der die Werte für die Eigenschaften -ms-scroll-snap-type und -ms-scroll-snap-points-y angibt.

 

Inhaltszoom-Andockpunkte

Mit diesen CSS-Eigenschaften können Sie Inhaltszoom-Andockpunkte für Ihre Inhalte festlegen. Diese Eigenschaften haben keine Auswirkung auf Elemente, die nicht gezoomt werden können.

EigenschaftBeschreibung

-ms-content-zoom-snap-type

Gibt an, wie das Zoomen durch die festgelegten Andockpunkte beeinflusst wird.

-ms-content-zoom-snap-points

Legt fest, wo sich Zoom-Andockpunkte befinden.

-ms-content-zoom-snap

Kompaktwert, der die Werte für die Eigenschaften -ms-content-zoom-snap-type und -ms-content-zoom-snap-points festlegt.

 

API-Referenz

Touch: Zooming and Panning

Beispiele und Lernprogramme

Beispiel für Zeiger und Gesten
Bildlauf, Verschieben und Zoomen mit Fingereingabe
So wird's gemacht: Simulieren von "Zeigen" auf Geräten, die die Toucheingabe unterstützen
Machen Sie Ihre Website bereit für die Toucheingabe
Entwickeln von adaptiven Websites

Demos für die Internet Explorer-Testversion

Mandelbrot-Explorer
Browseroberfläche
Fingereingabeeffekte
Brick Breaker

IEBlog-Beiträge

Aktivieren neuer interoperabler Verschiebungsfunktionen über die Spezifikation der CSS-Bildlaufandockpunkte
W3C-Arbeitsgruppe für Zeigerereignisse gegründet
Interoperable Zeigerereignisse: Weiterentwickeln von Eingabeereignissen für mehrere Geräte
Weitere Möglichkeiten für Gestikereignisse, die über Schwenken, Zoomen und Tippen hinausgehen
Richtlinien für das Erstellen von Websites für die Fingereingabe
Behandlung von Multitouch- und Mauseingabe in allen Browsern
Toucheingabe für IE10 und Windows Store-Apps

Verwandte Themen

Zeiger- und Gestikereignisse

 

 

Anzeigen:
© 2014 Microsoft