CSS Scroll Snap: dengan mudah membuat antara muka skrol lancar

Petikan ini dari Tiffany's CSS Master, edisi ke-2 , meneroka modul snap CSS Scroll, alat yang berkuasa untuk membina pengalaman web moden, seperti aplikasi. Snap tatal membolehkan kawalan yang tepat ke atas tingkah laku menatal, menghapuskan keperluan untuk JavaScript dalam banyak kes.

Modul snap tatal CSS telah berkembang. Versi lama (tatal SNAP

mata ), dilaksanakan dalam pelayar seperti versi lama Edge, Internet Explorer, dan Firefox, menggunakan pendekatan berasaskan piksel. Walau bagaimanapun, pelayar moden (Chrome 69, Safari 11) menggunakan model penjajaran kotak, yang menjadi tumpuan di sini. Berhati -hatilah dengan tutorial yang sudah lapuk menyebut "mata" atau menggunakan sifat atau scroll-snap-points-x. scroll-snap-points-y

mari kita membina tayangan slaid yang mudah untuk digambarkan. HTML sangat mudah:

<div>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341843771.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341850848.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341981083.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341944975.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915342067175.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img></div>

Tiada pembalut tambahan atau JavaScript diperlukan! CSS melakukan pengangkat berat:

* {
   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;
}

Mendefinisikan menatal mendatar dengan pemotongan mandatori. scroll-snap-type: x mandatory mengatur imej secara mendatar. display: flex memusatkan setiap imej dalam viewport. scroll-snap-align: center

Untuk menyelam yang lebih mendalam, berunding dengan panduan Google Web Fundamentals, "Menatal dengan baik dengan CSS Scroll Snap."

Soalan -soalan yang sering ditanya

• Apakah snap tatal CSS?

  CSS Scroll Snap mencipta skrol yang licin, terkawal, sesuai untuk karusel atau antara muka paged. Ia menguruskan kedudukan tatal, mengetuk pandangan ke titik tertentu.

• Bagaimanakah ia berbeza dari menatal biasa?

  Skrol biasa adalah mengalir bebas; Snap tatal menyediakan titik berhenti yang jelas untuk pengalaman pengguna yang lebih diramalkan.

• Bagaimana saya melaksanakannya? ??>,

  ) pada unsur -unsur kanak -kanak. scroll-snap-type x mandatory Nilai? y mandatory both mandatory, scroll-snap-align, atau start Tentukan paksi; end atau center kawalan ketat.

• Sokongan penyemak imbas? scroll-snap-type disokong secara meluas oleh pelayar moden, tetapi periksa kemas kini. x y both mandatory kes penggunaan biasa? proximity Carousels imej, susun atur paged, kandungan seksyen.

• Mengawal kelajuan tatal? Tidak secara langsung, tetapi secara tidak langsung dengan menyesuaikan jarak antara titik snap.

• Debugging? Gunakan alat pemaju penyemak imbas (mis., Snap snap snap snap).

• Sokongan mudah alih? Ya, berfungsi sepenuhnya pada peranti mudah alih.

Atas ialah kandungan terperinci Tatal Snap dalam CSS: Mengawal Tindakan Skrol. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!