Atribut scroll-margin-left CSS

Definisi dan penggunaan

scroll-margin-left 属性指定吸附位置与容器之间的距离。

Atribut yang menentukan jarak antara posisi yang diangkat dan kontainer. scroll-snap-align Posisi yang diangkat adalah posisi yang tetap di kontainer saat elemen anak berhenti menggulir. Posisi yang diangkat ditentukan melalui direction dan Atribut pengaturan, tetapi mungkin juga terpengaruh oleh atribut CSS lainnya writing-mode

pengaruhnya.Perhatian:

Ini hanya berlaku saat posisi yang diangkat diatur di sisi kiri elemen anak. scroll-margin-left Atribut efek, harus diatur di elemen anak untuk melihat scroll-margin-left dan scroll-snap-align Atribut, dan atur scroll-snap-type Atribut.

Contoh

Contoh 1

Atur jarak scroll margin antara posisi yang diangkat dan kontainer menjadi 20px:

div {
  scroll-margin-left: 20px;
}

Coba sendiri

Contoh 2: Perpustakaan gambar

scroll-margin-left Atribut ini dapat digunakan dalam galleri gambar yang memiliki perilaku yang diangkat. Disini,scroll-margin-left Buat pengguna tahu bahwa ada gambar lain di sisi kiri. Gigit gambar pertama untuk melihat efek:

#container > img {
  scroll-margin-left: 30px;
}

Coba sendiri

Contoh 3: Posisi yang diangkat

Untuk membuat scroll-margin-left Atribut ini berlaku, posisi yang diangkat harus diatur di sisi kiri elemen anak. Dalam kasus ini,direction Atribut ini akan mengubah posisi yang diangkat dari sisi kiri elemen anak ke sisi kanan. Dengan kode seperti ini,scroll-margin-left Atribut ini tidak akan berfungsi lagi:

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-left: 30px;
  scroll-snap-align: none start;
}

Coba sendiri

Syntaks CSS

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

Nilai atribut

Nilai Deskripsi
0 滚动外边距左侧为 0。默认值。
length

Tentukan nilai滚动外边距左侧的值,单位为 px、pt、cm 等。允许使用负值。

Lihat:Satuan CSS.

initial Atur atribut ini ke nilai defaultnya. Lihat: initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat: inherit.

Detil teknis

Nilai default: 0
Inheritsi: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Atribut berhubungan dengan animasi.
Versi: CSS3
Syntaks JavaScript: object.style.scrollMarginLeft="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 68.0 14.1 56.0

Halaman yang berhubungan

Referensi:Atribut direction CSS

Referensi:Atribut scroll-snap-align CSS

Referensi:Atribut scroll-snap-type CSS

Referensi:Properti writing-mode CSS