Atribut scroll-margin CSS

Definisi dan penggunaan

scroll-margin Atribut ini menentukan jarak antara posisi penarik dan kontainer.

Artinya, ketika Anda berhenti menggulung, penarikan akan menyesuaikan dan berhenti di jarak yang ditentukan antara posisi penarik dan kontainer saat berhenti.

Posisi penarik adalah posisi dimana elemen anak berhenti menggulung, yang disesuaikan di dalam kontainer.

scroll-margin Atribut ini adalah singkatan dari atribut berikut:

scroll-margin Nilai atribut dapat diatur dengan berbagai cara:

Jika atribut scroll-margin memiliki empat nilai:

scroll-margin: 15px 30px 60px 90px;
  • Jarak atas adalah 15px
  • Jarak kanan adalah 30px
  • Jarak bawah adalah 60px
  • Jarak kiri adalah 90px

Jika atribut scroll-margin memiliki tiga nilai:

scroll-margin: 15px 30px 60px;
  • Jarak atas adalah 15px
  • jarak kiri dan kanan 30px
  • Jarak bawah adalah 60px

Jika atribut scroll-margin memiliki dua nilai:

scroll-margin: 15px 30px;
  • jarak atas dan bawah 15px
  • jarak kiri dan kanan 30px

Jika atribut scroll-margin memiliki satu nilai:

scroll-margin: 10px;
  • jarak empat arah semua 10px

untuk melihat scroll-margin efek atribut scroll-margin dan scroll-snap-align Atribut, dan diatur di elemen orangtua scroll-snap-type Atribut.

Perhatian:Dalam contoh di bawah ini, margin penyorotan disetel untuk semua sisi, tetapi karena scroll-snap-align Atribut diatur menjadi "start", sehingga hanya margin penyorotan atas yang berubah perilaku penyorotan.

Contoh

Contoh 1

Atur posisi serapan dan margin penyorotan dengan kontainer 20px:

div {
  scroll-margin: 20px;
}

Coba sendiri

Contoh 2: Pustaka gambar

scroll-margin Atribut dapat digunakan di pustaka gambar yang memiliki perilaku serapan.scroll-margin Memungkinkan pengguna untuk melihat ada gambar lain di sisi kiri. Penyorotan melalui gambar pertama dapat melihat efek:

#container > img {
  scroll-margin: 0 0 0 30px;
}
Beijing Penari Wuhan Tulip Hangzhou

Coba sendiri

Contoh 3: Mengatur margin penyorotan dasar dan sisi kanan

Dapat disetel di dasar dan sisi kanan elemen. scroll-margin Atribut. Penyorotan horizontal dan vertikal ke elemen berikutnya dapat melihat efek:

#container > div {
  scroll-margin: 0 10px 30px 0;
}





Coba sendiri

Syntaks CSS

scroll-margin: 0|value|initial|inherit;

Nilai atribut

Nilai Deskripsi
0 Margin penyorotan nol. Nilai default.
length

Tentukan jarak margin penyorotan dengan satuan px, pt, cm, dll. Diperbolehkan untuk menggunakan nilai negatif.

Lihat:Satuan CSS。
initial Atur atribut ini ke nilai default. Lihat initial。
inherit Mengambil atribut ini dari elemen orangtua. Lihat inherit。

Detil teknis

Nilai default： 0
Inheritsi： Tidak
Pembuatan animasi： Tidak didukung. Lihat:Atribut yang berhubungan dengan animasi。
Versi： CSS3
Syntaks JavaScript： object.style.scrollMargin="20px"

Dukungan browser

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

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

Halaman yang berhubungan

Referensi：Atribut scroll-margin-bottom CSS

Referensi：Atribut scroll-margin-left CSS

Referensi：Atribut scroll-margin-right CSS

Referensi：Atribut scroll-margin-top CSS

Referensi：Atribut scroll-snap-align CSS

Referensi：Atribut scroll-snap-type CSS