Sifat scroll-snap-align CSS

Definisi dan penggunaan

scroll-snap-align 属性 menentukan lokasi yang diikat elemen saat anda berhenti menggulir.

Untuk melaksanakan tindakan klem penarik, perlu diatur di dalam elemen anak scroll-snap-align 属性，di dalam elemen bapa scroll-snap-type Atribut.}}

Contoh

Contoh 1

Ketika pengguna berhenti menggulir, lakukan elemen terdekat untuk disesuaikan ke posisi tengah:

div {
  scroll-snap-align: center;
}

Coba sendiri

Contoh 2: Koleksi gambar

scroll-snap-align Atribut ini sangat cocok digunakan untuk menggulir melihat koleksi gambar. Disini, arah pengguliran adalah horisontal, cara penggantian yang disesuaikan adalah tengah. Ketika pengguna melepaskan bilah penggulir, gambar terdekat akan disesuaikan ke posisi tengah area yang dapat digulir. Coba klik satu gambar, lalu gunakan tombol panah kiri dan kanan untuk menggulir melihatnya:

#container > img {
  scroll-snap-align: none center;
}
北京 舞蹈者 武汉 郁金香 杭州

Coba sendiri

bridge alley in jungle mountains man with camera Cinque Terre

Contoh 3: Penjajaran posisi penggantian di arah blok

Ketika menggulir vertikalscroll-snap-align Atribut ini juga dapat diatur di posisi awal elemen di arah blok：

#container > div {
  scroll-snap-align: start none;
}

Coba sendiri

Sintaks CSS

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

Nilai atribut

Nilai Deskripsi
none Tidak ada efek penarikan yang disesuaikan. Nilai default.
start Pada sumbu x dan y, lakukan penarikan yang disesuaikan di awal elemen.
end Pada sumbu x dan y, lakukan penarikan yang disesuaikan di akhir elemen.
center Pada sumbu x dan y, lakukan penarikan yang disesuaikan di pusat elemen.
block inline Sintaks double nilai. Nilai pertama menentukan cara penggantian di arah blok, nilai kedua menentukan cara penggantian di arah inline.
initial Atur atribut ini ke nilai default. Lihat initial。
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit。

Detil teknis

Nilai default： none
Inheritsi： Tidak
Pembuatan animasi： Tidak didukung. Lihat:Atribut yang berhubungan dengan animasi。
Versi： CSS3
语法 JavaScript： object.style.scrollSnapAlign="start"

Dukungan browser

Angka di dalam tabel menunjukkan versi browser yang pertama yang sepenuhnya mendukung atribut ini.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

Halaman yang relevan

Rujukan：Sifat scroll-snap-type CSS