Sifat scroll-margin CSS

Definisi dan penggunaan

scroll-margin properti ini menentukan jarak antara posisi penahan dan kontainer.

ini berarti saat Anda berhenti berputar, penyerapan akan menyesuaikan dan berhenti di jarak yang ditentukan antara posisi penahan (snap position) dan kontainer.

kedudukan penahan adalah posisi yang dipegang oleh elemen anak saat halaman berhenti berputar di dalam kontainer.

scroll-margin properti adalah singkatan bagi properti berikut:

scroll-margin nilai properti dapat diatur dengan berbagai cara:

jika properti scroll-margin mempunyai 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 properti scroll-margin mempunyai tiga nilai:

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

jika properti scroll-margin mempunyai dua nilai:

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

Jika atribut scroll-margin memiliki nilai:

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

Untuk melihat scroll-margin kesan atribut scroll-margin dan scroll-snap-align Atribut, dan diatur di elemen induk scroll-snap-type Atribut.

Perhatian:Dalam contoh di bawah, marjin penarikan luar diatur untuk semua sisi, tetapi karena scroll-snap-align Atribut diatur ke "start", sehingga hanya marjin penarikan luar atas yang mengubah tingkah laku penarikan.

Contoh

Contoh 1

Tetapkan marjin penarikan luar antara lokasi serapan dan kontainer 20px:

div {
  scroll-margin: 20px;
}

Coba sendiri

Contoh 2: Pustaka gambar

scroll-margin Atribut dapat digunakan di pustaka gambar yang mempunyai tingkah laku serapan.scroll-margin Memungkinkan pengguna untuk melihat gambar lain di sebelah kiri. Penarikan luar pertama gambar dapat dilihat kesan:

#container > img {
  scroll-margin: 0 0 0 30px;
}
北京 舞者 武汉 郁金香 杭州

Coba sendiri

Contoh 3: Tetapkan marjin penarikan luar dasar dan kanan

Dapat ditetapkan di dasar dan kanan elemen. scroll-margin Atribut. Penarikan horizontal dan vertikal ke elemen berikutnya dapat dilihat kesan:

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





Coba sendiri

Syarat CSS

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

Nilai atribut

Nilai Penerangan
0 Marjin penarikan luar nol. Nilai lalai.
length

Tentukan marjin penarikan luar dengan satuan px, pt, cm, dll. Diperkenalkan nilai negatif.

Lihat:CSS 单位。
initial Tetapkan sifat ini ke nilai lalai. Lihat initial。
inherit Mewarisi sifat ini dari elemen induk. Lihat inherit。

Detil teknikal

Nilai lalai： 0
Keretribosan： Tidak
Pembuatan animasi： Tidak didukung. Lihat:Atribut berhubungan dengan animasi。
Versi： CSS3
Syarat JavaScript： object.style.scrollMargin="20px"

Dukungan pereka

Angka di dalam tabel menunjukkan versi pereka paling awal yang sepenuhnya mendukung sifat ini.

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

Halaman berkaitan

Rujukan：Sifat scroll-margin-bottom CSS

Rujukan：Sifat scroll-margin-left CSS

Rujukan：Sifat scroll-margin-right CSS

Rujukan：Sifat scroll-margin-top CSS

Rujukan：Sifat scroll-snap-align CSS

Rujukan：Sifat scroll-snap-type CSS