Wie kann man den horizontalen Scrolling -Effekt von Mausrad durch CSS erzielen?

CSS

Im Webdesign benötigen wir häufig das Mausrad, um horizontales Scrollen zu erzielen, insbesondere in Szenarien, in denen viele horizontale Inhalte angeordnet sind. Standardmäßig steuert das Bildlaufrad normalerweise das Porträt -Scrolling, und Sie müssen die Schaltschlüssel halten, um horizontal zu scrollen, was nicht bequem ist. Während JavaScript auf Scroll -Rad -Ereignisse anhören und horizontale Bildlaufleisten steuern kann, kann dieser Ansatz dazu führen, dass das Scrollen nicht glatt genug ist.

In diesem Artikel wird eine elegantere Lösung eingeführt: Verwenden Sie den CSS -Stil, um horizontales Scrollen ohne JavaScript zu erreichen. Scrollen ist reibungsloser und natürlicher.

Frühere JavaScript -Methoden wie:

 Funktion OnScroll (Ereignis) {
  links = -Event.Wheeldelta || Ereignis.Deltay / 2;
  templatelistef.value.scrollleft = templatelistef.value.scrollleft links;
}

Es gibt Leistungsprobleme und schlechte Erfahrung.

Der Kern unserer CSS -Lösung ist die Rotation:

1. Behälter drehen: Behälterelemente -90 Grad drehen, transform: rotate(-90deg);
2. Kinderelemente drehen: Drehen Sie die untergeordneten Elemente im Behälter um 90 Grad, transform: rotate(90deg);

Durch Drehen von Behältern und Kinderelementen wird die vertikale Schriftrolle der Maus geschickt in visuelle horizontale Scrollen umgewandelt. Diese Methode ist einfach und direkt, vermeidet den von JavaScript mitgelieferten Leistungsaufwand und hat eine bessere Benutzererfahrung. Sie müssen das Bildlaufradereignis nicht überwachen, das Scrollen ist natürlicher und reibungsloser.

Das obige ist der detaillierte Inhalt vonWie kann man den horizontalen Scrolling -Effekt von Mausrad durch CSS erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!