Exporter (0) Imprimer
Développer tout

Défilement et zoom tactiles

Remarque  Les propriétés décrites dans cette section ne sont pas prises en charge dans Windows 7.

Deux composants clés des interactions tactiles sont le défilement (ou panoramique) et le zoom. Les applications et les pages Web tactiles utilisent le défilement et le zoom pour permettre aux utilisateurs d’accéder à plus de contenu, de parcourir les éléments d’une liste, d’afficher plus de détails dans une photo, etc.

Lorsque vous voulez avoir plus d’informations sur les activités de l’utilisateur, vous utilisez les événements de pointeur et de mouvement, qui sont décrits en détail dans Événements pointeur et mouvement. Cet article décrit les méthodes que vous pouvez utiliser pour contrôler le défilement et le zoom sur des pages tactiles dans Internet Explorer 10 ou votre application Windows Store à l’aide de JavaScript dans Windows 8.

Aspects que vous pouvez contrôler

Les vues de défilement et de zoom représentent une excellente expérience en matière de fonctions tactiles. Les utilisateurs basent leurs premières opinions de votre page Web ou application selon ce qu’il se produit lorsqu’ils touchent l’écran pour la première fois et y font glisser leurs doigts. En gardant cela à l’esprit, il existe de nombreux détails et nuances à régler pour offrir la meilleure expérience possible.

Parmi les interactions d’ordre général qui doivent « juste fonctionner » pour vos utilisateurs figurent les suivantes :

  • Défilement (ou panoramique) du contenu en touchant l’écran, puis en faisant glisser le doigt pour révéler davantage de contenu
  • Zoom de l’image à l’écran en effectuant un geste de pincement (en rapprochant les doigts pour faire un zoom avant et en les écartant pour faire un zoom arrière), ou en appuyant deux fois sur un élément de niveau supérieur (Internet Explorer dans la nouvelle interface utilisateur Windows uniquement)
  • Inertie qui poursuit le défilement du contenu de façon prévisible une fois que le doigt de l’utilisateur quitte l’écran
  • Zones de contenu qui rebondissent lorsque la zone que l’utilisateur fait défiler atteint les bords
  • Zones de défilement ou de zoom qui sont imbriquées à l’intérieur d’autres zones de défilement ou de zoom et qui se comportent comme les utilisateurs s’y attendent
  • Points d’ancrage qui, lorsqu’ils sont appliqués à des emplacements clés, facilitent l’accès à ces emplacements pour les utilisateurs lors du défilement ou du zoom
  • Contrôles qui s’intègrent de façon transparente au contenu qui est l’objet du défilement ou du zoom ; des boutons et d’autres éléments d’interface dans le contenu répondent comme prévu, sans déclencher de comportement de défilement ni de zoom

Heureusement, ces fonctions sont intégrées à Internet Explorer 10 et aux applications du Windows Store en JavaScript dans Windows 8. Toutefois, vous pouvez régler avec précision un grand nombre de ces interactions en utilisant plusieurs nouvelles propriétés CSS.

Contrôle du comportement de défilement

Vous pouvez contrôler le comportement de défilement avec les propriétés CSS décrites dans cette section.

Remarque  Affichez l’exemple de code fonctionnel qui incorpore ces propriétés dans Scénario 1 : Panoramique, contrôle de ce que l’utilisateur peut survoler, dans l’exemple Défilement, panoramique et zoom avec entrées tactiles de la Galerie d’exemples Internet Explorer sur MSDN.

Contrôle de la zone avec défilement

Avec les propriétés CSS suivantes, vous pouvez contrôler la taille de la zone que l’utilisateur peut faire défiler. Ces propriétés n’ont aucun effet sur les éléments qui ne peuvent pas faire l’objet d’un défilement.

PropriétéDescription

-ms-scroll-limit

Propriété raccourcie qui spécifie des valeurs pour les propriétés -ms-scroll-limit-x-min, -ms-scroll-limit-y-min, -ms-scroll-limit-x-max et -ms-scroll-limit-y-max.

-ms-scroll-limit-x-max

Spécifie la valeur maximale pour la propriété scrollLeft.

-ms-scroll-limit-x-min

Spécifie la valeur minimale pour la propriété scrollLeft.

-ms-scroll-limit-y-max

Spécifie la valeur maximale pour la propriété scrollTop.

-ms-scroll-limit-y-min

Spécifie la valeur minimale pour la propriété scrollTop.

 

Contrôle des méthodes de défilement

Vous pouvez contrôler les méthodes de défilement pour les éléments qui dépassent —une barre de défilement classique, une barre de défilement à masquage automatique ou rien— à l’aide de cette propriété CSS.

PropriétéDescription

-ms-overflow-style

Spécifie les méthodes de défilement préférées pour les éléments qui dépassent.

 

Indication des rails de défilement

Cette propriété CSS vous permet de contrôler si le défilement est verrouillé sur l’axe de mouvement —vertical ou horizontal— ou suit exactement le doigt de l’utilisateur, permettant ainsi un défilement libre.

PropriétéDescription

-ms-scroll-rails

Indique si le défilement est verrouillé sur l’axe principal de mouvement.

 

Conversion du mouvement de la roulette de défilement

Si votre code JavaScript écoute les événements DOM (Document Object Model) de la roulette de défilement, les événements qui se produisent lorsque l’utilisateur fait défiler l’écran verticalement seront toujours des événements de défilement vertical et non horizontal. De même, les événements qui se produisent lorsque l’utilisateur fait défiler l’écran horizontalement seront toujours des événements de défilement horizontal.

Vous pouvez utiliser la propriété CSS suivante pour modifier ce comportement pour les événements de défilement vertical.

PropriétéDescription

-ms-scroll-translation

Spécifie si une conversion de la roulette de défilement vertical vers horizontal se produit sur l’élément spécifié. La valeur vertical-to-horizontal indique que les événements de défilement vertical doivent être interprétés comme leurs événements de défilement horizontal correspondants, alors que la valeur none indique l’absence de conversion de la roulette de défilement.

 

Contrôle du comportement de zoom

Vous pouvez contrôler le comportement de zoom en utilisant les propriétés CSS décrites ici.

Remarque  Affichez l’exemple de code fonctionnel qui incorpore ces propriétés dans Scénario 3 : Zoom, l’utilisateur peut effectuer un zoom du contenu d’un élément, dans l’exemple Défilement, panoramique et zoom avec entrées tactiles de la Galerie d’exemples Internet Explorer sur MSDN.

Activation du zoom

Utilisez la propriété suivante pour spécifier si le zoom doit être activé pour un élément donné. Cette propriété n’a aucun effet sauf si le dépassement est autorisé à la fois sur les axes x et y.

PropriétéDescription

-ms-content-zooming

Indique si le zoom est activé.

 

Contrôle du facteur de zoom

Avec les propriétés CSS suivantes, vous pouvez contrôler le niveau de zoom d’un élément. Ces propriétés n’ont aucun effet sur les éléments qui ne peuvent pas faire l’objet d’un zoom.

PropriétéDescription

-ms-content-zoom-limit

Propriété raccourcie qui spécifie des valeurs pour les propriétés -ms-content-zoom-limit-min et -ms-content-zoom-limit-max.

-ms-content-zoom-limit-max

Spécifie le facteur de zoom maximal.

-ms-content-zoom-limit-min

Spécifie le facteur de zoom minimal.

 

Les propriétés précédentes spécifient le facteur de zoom en définissant la propriété DOM suivante :

PropriétéDescription

msContentZoomFactor

Indique le facteur de zoom de contenu.

 

Spécification des comportements de contenu imbriqué ayant fait l’objet d’un défilement ou d’un zoom

Une fois qu’un utilisateur atteint une limite de zoom ou de défilement sur un élément qui a été imbriqué dans un autre élément avec zoom ou défilement, vous pouvez spécifier si cet élément parent doit continuer l’opération de zoom ou de défilement commencée dans son élément enfant. Cela s’appelle le chaînage de zoom ou de défilement.

Remarque  Affichez l’exemple de code fonctionnel qui incorpore ces propriétés dans Scénario 4 : Chaînage, synthèse de tous les éléments, dans l’exemple Défilement, panoramique et zoom avec entrées tactiles de la Galerie d’exemples Internet Explorer sur MSDN.

Spécification du comportement de chaînage

Vous pouvez spécifier le comportement de chaînage avec les propriétés CSS suivantes. Ces propriétés n’ont aucun effet sur les éléments qui ne peuvent pas faire l’objet d’un zoom ni d’un défilement, respectivement.

PropriétéDescription

-ms-content-zoom-chaining

Indique le comportement de zoom qui se produit lorsqu’un utilisateur atteint la limite de zoom pendant une manipulation.

-ms-scroll-chaining

Indique le comportement de défilement qui se produit lorsqu’un utilisateur atteint la limite de défilement pendant une manipulation.

 

Détermination du comportement tactile par défaut

En utilisant la propriété CSS décrite ici, vous pouvez déterminer le comportement autorisé lorsqu’un utilisateur touche un élément —par exemple un défilement ou un zoom. Le comportement tactile est alors exécuté sur l’élément ancêtre le plus proche qui est capable de le prendre en charge, sauf si un élément ancêtre intermédiaire spécifie que le comportement n’est pas autorisé.

Si aucun comportement tactile par défaut n’est appelé, les événements DOM sont déclenchés pour ce contact à la place (voir Événements pointeur et mouvement).

Remarque  Affichez l’exemple de code fonctionnel qui incorpore ces propriétés dans Scénario 5 : Actions tactiles, placement d’événements dans des éléments de panoramique/zoom, dans l’exemple Défilement, panoramique et zoom avec entrées tactiles de la Galerie d’exemples Internet Explorer sur MSDN.

PropriétéDescription

-ms-touch-action

Indique si et comment une région donnée peut être manipulée par l’utilisateur.

Les valeurs possibles pour cette propriété sont notamment :

  • auto  Valeur initiale. Indique que le navigateur détermine les comportements tactiles autorisés pour l’élément.
  • none  L’élément n’autorise aucun comportement tactile par défaut.
  • pan-x  L’élément autorise un panoramique tactile (défilement) sur l’axe horizontal. Le panoramique tactile est exécuté sur l’ancêtre le plus proche avec un contenu avec défilement horizontal.
  • pan-y  L’élément autorise un panoramique tactile (défilement) sur l’axe vertical. Le panoramique tactile est exécuté sur l’ancêtre le plus proche avec un contenu avec défilement vertical.
  • pinch-zoom  L’élément autorise le zoom par pincement. Le zoom par pincement est exécuté sur l’ancêtre le plus proche avec un contenu avec zoom.
  • manipulation  L’élément autorise le défilement tactile et le zoom par pincement. Il s’agit de la fonction équivalente de "pan-x pan-y pinch-zoom" en version raccourcie.
  • double-tap-zoom  L’élément autorise les zooms par double appui. Le zoom par double appui est effectué sur toute la page. Le zoom par double appui n’est pas disponible dans les applications du Windows Store en JavaScript.

 

Prenons l’exemple d’une page Web ou application de peinture avec le doigt. Dans cet exemple, il est important que la zone de dessin ne bouge pas quand un utilisateur la touche et la manipule. Lorsque l’exemple de code suivant est inclus dans la propriété CSS de la page et qu’un utilisateur touche cette zone de dessin et bouge son doigt, aucune manipulation ne survient. Les événements DOM sont envoyés à la place.


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

Prenons maintenant l’exemple suivant, qui génère une liste qui défile le long de l’axe des x mais autorise le déplacement ou la réorganisation si l’utilisateur tire un élément le long de l’axe des y (semblable à l’écran d’accueil de Windows 8). Lorsque l’utilisateur touche listEntry et déplace son doigt le long de l’axe des x, la liste défile. En revanche, si l’utilisateur déplace son doigt le long de l’axe des y, aucun défilement ne se produit. Les événements DOM sont envoyés à la place.


div.list {
  overflow-x: scroll;
}

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

Création de points d’ancrage de contenu

Lorsqu’un utilisateur effectue un défilement ou un zoom, puis lève son ou ses doigts, le contenu continue de défiler ou de zoomer avec une certaine inertie. Vous pouvez régler avec précision le point de fin du contenu à la fin de l’inertie en utilisant des points d’ancrage.

Vous pouvez appliquer des points d’ancrage à des emplacements clés de votre contenu pour augmenter les chances que l’emplacement clé soit visible lorsque l’inertie s’arrête. Par exemple, appliquez des points d’ancrage de défilement à un titre particulier pour augmenter les chances que le mouvement d’inertie conduise le lecteur au niveau de ce titre alors qu’il se serait autrement posé ailleurs dans les environs. Vous pouvez aussi définir des points d’ancrage de zoom selon un niveau de zoom spécifique ; ainsi, lorsqu’un utilisateur appuie deux fois pour effectuer un zoom avant, la page passe toujours à ce niveau de zoom.

En plaçant des points d’ancrage, vous pouvez simplifier la manipulation de votre contenu pour les utilisateurs et définir l’arrêt du contenu à des emplacements clés ou pratiques.

Remarque  Affichez l’exemple de code fonctionnel qui incorpore ces propriétés dans Scénario 2 : Définition et configuration des points d’ancrage, dans l’exemple Défilement, panoramique et zoom avec entrées tactiles de la Galerie d’exemples Internet Explorer sur MSDN.

Points d’ancrage de défilement

Les propriétés CSS suivantes vous permettent de définir des points d’ancrage de défilement sur votre contenu. Ces propriétés n’ont aucun effet sur les éléments qui ne peuvent pas faire l’objet d’un défilement.

PropriétéDescription

-ms-scroll-snap-points-x

Définit l’emplacement des points d’ancrage le long de l’axe des x.

-ms-scroll-snap-points-y

Définit l’emplacement des points d’ancrage le long de l’axe des y.

-ms-scroll-snap-type

Définit le type de point d’ancrage qui doit être utilisé pour l’élément actuel —un point d’ancrage de proximité (Lorsqu’une inertie normale laisse le contenu près d’un point d’ancrage, celle-ci est ajustée pour le poser exactement sur le point d’ancrage ; il est toujours possible, cependant, de se poser entre des points d’ancrage.) ou un point d’ancrage obligatoire (L’inertie est ajustée pour garantir que le contenu se pose toujours sur un point d’ancrage sans jamais le dépasser.).

-ms-scroll-snap-x

Valeur raccourcie qui spécifie des valeurs pour les propriétés -ms-scroll-snap-type et -ms-scroll-snap-points-x.

-ms-scroll-snap-y

Valeur raccourcie qui spécifie des valeurs pour les propriétés -ms-scroll-snap-type et -ms-scroll-snap-points-y.

 

Points d’ancrage de zoom de contenu

Les propriétés CSS suivantes vous permettent de définir des points d’ancrage de zoom de contenu sur votre contenu. Ces propriétés n’ont aucun effet sur les éléments qui ne peuvent pas faire l’objet d’un zoom.

PropriétéDescription

-ms-content-zoom-snap-type

Indique comment le zoom est affecté par les points d’ancrage définis.

-ms-content-zoom-snap-points

Définit l’emplacement des points d’ancrage de zoom.

-ms-content-zoom-snap

Valeur raccourcie qui définit des valeurs pour les propriétés -ms-content-zoom-snap-type et -ms-content-zoom-snap-points.

 

Informations de référence sur les API

Touch: Zooming and Panning

Exemples et didacticiels

Exemples de pointeurs et de mouvements
Défilement, mouvement panoramique et zoom tactiles
Comment simuler le pointage sur des appareils tactiles
Préparer votre site aux interactions tactiles
Concevoir des sites Web adaptatifs

Démonstrations du site Internet Explorer Test Drive

Mandelbrot Explorer
Browser Surface
Touch Effects
Brick Breaker

Billets IEBlog

Procurer de nouvelles expériences de mouvements panoramiques interopérables grâce à la spécification de points d’ancrage de défilement CSS
Groupe de travail du W3C sur les événements de pointeur
Vers des événements de pointeur interopérables : évolution des événements d’entrée pour plusieurs appareils
Aller au-delà du panorama, de l’agrandissement et de l’appui à l’aide d’événements de mouvements
Recommandations en matière de génération de sites tactiles
Gestion des entrées tactiles multipoint et des entrées de souris dans tous les navigateurs
Entrées tactiles pour Internet Explorer 10 et les applications du Windows Store

Rubriques connexes

Événements de pointeur et de mouvement

 

 

Afficher:
© 2014 Microsoft