Atribut scroll-snap-align CSS

Definisi dan penggunaan

scroll-snap-align Properti menentukan bahwa saat Anda berhenti menggeser, elemen akan disesuaikan ke posisi tumpuan.

Untuk melaksanakan perilaku penahan geser, harus diatur properti di elemen anak scroll-snap-align atur properti, dan di elemen induk scroll-snap-type Atribut.

Contoh

Contoh 1

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

div {
  scroll-snap-align: center;
}

Coba sendiri

Contoh 2: Pustaka gambar

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

#container > img {
  scroll-snap-align: none center;
}
Beijing Penari Wuhan Tulip Hangzhou

Coba sendiri

bridge alley in jungle mountains man with camera Cinque Terre

Contoh 3: Penarikan posisi yang sejajar 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

Sintaksis CSS

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

Nilai atribut

Nilai Deskripsi
none Tidak ada efek penarikan ber滚动. Nilai standar.
start Pada sumbu x dan y, elemen di titik awal penarikan.
end Pada sumbu x dan y, elemen di titik akhir penarikan.
center Pada sumbu x dan y, elemen di tengah titik penarikan.
block inline Sintaksis double nilai. Nilai pertama menentukan cara penarikan di arah blok, nilai kedua menentukan cara penarikan di arah inline.
initial Atur atribut ini ke nilai standarnya. Lihat initial。
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit。

Detil teknis

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

Dukungan browser

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

Halaman terkait

Referensi：Atribut scroll-snap-type CSS