Bagaimana untuk mencapai kesan menatal mendatar roda tetikus melalui CSS?

Petua CSS: Mudah Menyedari Menatal mendatar roda tetikus

Dalam reka bentuk web, kita sering memerlukan roda tetikus untuk mencapai menatal mendatar, terutamanya dalam senario di mana terdapat banyak kandungan yang disusun secara mendatar. Secara lalai, roda tatal biasanya mengawal menatal potret, dan anda perlu menahan kekunci peralihan untuk menatal secara mendatar, yang tidak mudah. Walaupun JavaScript boleh mendengar peristiwa roda skrol dan mengawal bar skrol mendatar, pendekatan ini boleh menyebabkan menatal tidak cukup lancar.

Artikel ini memperkenalkan penyelesaian yang lebih elegan: Gunakan gaya CSS untuk mencapai menatal mendatar, tanpa JavaScript, menatal lebih lancar dan lebih semula jadi.

Kaedah JavaScript sebelumnya, seperti:

 fungsi onScroll (event) {
  Biarkan kiri = -Event.Wheeldelta || event.deltay / 2;
  TemplateListref.Value.ScrollLeft = TemplateListref.Value.ScrollLeft Kiri;
}

Terdapat masalah prestasi dan pengalaman yang buruk.

Inti penyelesaian CSS kami adalah putaran:

1. Putar bekas: Putar elemen kontena -90 darjah, transform: rotate(-90deg);
2. Putar Unsur Kanak -kanak: Putar unsur -unsur kanak -kanak dalam bekas dengan 90 darjah, transform: rotate(90deg);

Dengan berputar bekas dan elemen kanak -kanak, tatal menegak tetikus dengan bijak ditukar menjadi tatal mendatar visual. Kaedah ini mudah dan langsung, mengelakkan overhead prestasi yang dibawa oleh JavaScript dan mempunyai pengalaman pengguna yang lebih baik. Tidak perlu memantau acara roda menatal, menatal lebih semula jadi dan lebih lancar.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan menatal mendatar roda tetikus melalui CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!