SCOLL SNAP dans CSS: Contrôle de l'action de défilement

CSS SCH SNOP: Créez sans effort les interfaces de défilement lisse

Cet extrait de Tiffany's CSS Master, 2e édition , explore le module CSS Scroll Snap, un outil puissant pour créer des expériences Web modernes et applicables. Scroll Snap permet un contrôle précis sur le comportement de défilement, éliminant le besoin de JavaScript dans de nombreux cas.

Le module CSS Scroll Snap a évolué. Les versions plus anciennes (Scroll Snap Points ), implémentées dans des navigateurs comme les anciennes versions d'Edge, Internet Explorer et Firefox, ont utilisé une approche basée sur des pixels. Cependant, les navigateurs modernes (Chrome 69, Safari 11) utilisent un modèle d'alignement de boîte, qui est l'accent ici. Méfiez-vous des tutoriels obsolètes mentionnant des "points" ou en utilisant scroll-snap-points-x ou scroll-snap-points-y Propriétés.

Créons un simple diaporama à illustrer. Le HTML est remarquablement simple:

<div>
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341843771.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341850848.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341981083.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341944975.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915342067175.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img></div>

Aucun emballage ou javascript supplémentaire n'est nécessaire! Le CSS fait le travail lourd:

* {
   box-sizing: border-box;
}

html, body {
    padding: 0; 
    margin: 0;
}

.slideshow {
  scroll-snap-type: x mandatory; /* Scroll axis and behavior */
  overflow-x: auto;              /* 'scroll' or 'auto' */
  display: flex;
  height: 100vh;
}

.slideshow img {
  width: 100vw;
  height: 100vh;
  scroll-snap-align: center;
}

scroll-snap-type: x mandatory définit le défilement horizontal avec un claquement obligatoire. display: flex organise des images horizontalement. scroll-snap-align: center centre chaque image de la fenêtre.

Pour une plongée plus profonde, consultez Google Web Fundamentals 'Guide, "défilement bien contrôlé avec CSS Scroll Snap."

Questions fréquemment posées

• Qu'est-ce que CSS Scroll Snap? CSS Scroll Snap crée un défilement lisse et contrôlé, idéal pour les carrousels ou les interfaces paginées. Il gère les positions de défilement, claquant la vue sur des points spécifiques.

• En quoi diffère-t-il du défilement régulier? Le défilement régulier est fluide; Scroll Snap fournit des points d'arrêt définis pour une expérience utilisateur plus prévisible.

• comment puis-je l'implémenter? Utiliser scroll-snap-type sur le conteneur (par exemple, x mandatory, y mandatory, ou both mandatory) et scroll-snap-align (par exemple, start, end, center) sur les éléments enfants.

• scroll-snap-type valeurs? x, y, ou both Spécifiez l'axe; mandatory ou proximity Contrôler la rigueur du snot.

• Prise en charge du navigateur? largement pris en charge par les navigateurs modernes, mais vérifiez les mises à jour.

• Cas d'utilisation courants? Carrousels d'image, dispositions de paginage, contenu sectionné.

• Contrôle de la vitesse de défilement? Pas directement, mais indirectement en ajustant la distance entre les points d'inclinaison.

• Débogage? Utiliser des outils de développeur de navigateur (par exemple, le haut-linge de chrome Snoll Snoll).

• Prise en charge mobile? Oui, entièrement fonctionnel sur les appareils mobiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!