Comment réaliser l'effet de défilement horizontal de la roue de la souris à travers le CSS?

Conseils CSS: réalisez facilement le défilement horizontal de la roue de la souris

Dans la conception Web, nous avons souvent besoin de la roue de la souris pour réaliser un défilement horizontal, en particulier dans les scénarios où il y a beaucoup de contenu organisé horizontalement. Par défaut, la roue de défilement contrôle généralement le défilement du portrait, et vous devez maintenir la touche de décalage pour faire défiler horizontalement, ce qui n'est pas pratique. Bien que JavaScript puisse écouter les événements de la roue de défilement et contrôler les barres de défilement horizontales, cette approche peut faire en sorte que le défilement ne soit pas assez lisse.

Cet article présente une solution plus élégante: utiliser le style CSS pour réaliser un défilement horizontal, sans JavaScript, le défilement est plus lisse et plus naturel.

Méthodes JavaScript précédentes, telles que:

 fonction onScroll (événement) {
  Let Left = -event.Wheeldelta || event.deltay / 2;
  TemplateListref.Value.Scrollleft = TemplateListref.Value.Scrollleft Left;
}

Il y a des problèmes de performance et une mauvaise expérience.

Le noyau de notre solution CSS est la rotation:

1. Réparateur de rotation: Éléments de récipient tournant -90 degrés, transform: rotate(-90deg);
2. Faites tourner les éléments enfants: tournez les éléments enfants dans le récipient de 90 degrés, transform: rotate(90deg);

En faisant tourner les conteneurs et les éléments enfants, le parchemin vertical de la souris est intelligemment converti en défilement horizontal visuel. Cette méthode est simple et directe, évite les frais généraux de performances apportés par JavaScript et possède une meilleure expérience utilisateur. Pas besoin de surveiller l'événement de roue de défilement, le défilement est plus naturel et plus lisse.

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!