Atribut scroll-snap-type CSS

Definisi dan penggunaan

scroll-snap-type Properti menentukan bagaimana elemen akan menempel ke fokus saat Anda berhenti menggulir dan arah penempelannya.

Untuk mencapai perilaku taruh gerakan滾ing, harus disetel di elemen induk. scroll-snap-type Atribut, dan setel scroll-snap-align Atribut.

Contoh

Contoh 1

Setel fungsi taruh gerakan滾ing di sumbu x:

#container {
  scroll-snap-type: x mandatory;
}

Coba sendiri

Contoh 2: Setel perilaku taruh di sumbu x dan y

Setel efek taruh di sumbu x dan y. scroll-snap-type Atribut:

#container > div {
  scroll-snap-type: both mandatory;
}





Coba sendiri

Contoh 3: Perilaku taruh dekat

Setel efek taruh gerakan滾ing di sumbu x dan y dengan perilaku dekat. scroll-snap-type Atribut. Saat digunakan nilai atribut ini, jika operasi gerakan滾ing berhenti di tengah antara dua elemen, taruh tidak akan dilakukan:

#container > div {
  scroll-snap-type: both proximity;
}





Coba sendiri

Sintaksis CSS

scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;

Nilai atribut

Nilai Deskripsi
none Tidak ada efek taruh gerakan滾ing. Nilai standar.
x Setel efek taruh gerakan滾ing di sumbu x.
y Setel efek taruh gerakan滾ing di sumbu y.
block Setel efek taruh gerakan滾ing di arah blok.
inline Setel efek taruh gerakan滾ing di arah dalam.
both Setel efek taruh gerakan滾ing di sumbu x dan y.
mandatory Setelah operasi gerakan滾ing selesai, gerakan akan otomatis bergerak ke titik taruh.
proximity

Mirip dengan mandatory, tetapi kurang kaku.

Setelah operasi gerakan滾动 selesai, gerakan akan otomatis bergerak ke titik taruh, tetapi ada area antara titik taruh yang tidak ada efek taruh.

Tergantung pada parameter browser.
initial Setel atribut ini ke nilai standarnya. Lihat initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai standar: none
Inheritance: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi: CSS3
Sintaksis JavaScript: object.style.scrollSnapType="x mandatory"

Dukungan browser

Tabel yang ada di dalamnya menunjukkan versi browser pertama yang sepenuhnya mendukung atribut ini.

Chrome Edge Firefox Safari Opera
69.0 79.0 99.0 11.0 11.0

56.0

Halaman terkaitAtribut scroll-snap-align CSS