Atribut scroll-margin-right CSS

定义和用法

scroll-margin-right Atribut untuk menentukan jarak antara posisi lepas dan kontainer.

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

Perhatian:Atribut ini hanya berlaku saat posisi lepas diatur di kanan elemen anak.

untuk melihat scroll-margin-right Atribut efek, harus diatur di elemen anak scroll-margin-right dan scroll-snap-align Atribut, dan atur scroll-snap-type Atribut.

Contoh

Contoh 1

Atur jarak luar滚动外边距 antara posisi lepas dan kontainer menjadi 20px:

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

Coba sendiri

Contoh 2: Pustaka gambar

scroll-margin-right Atribut dapat digunakan di galleri gambar yang memiliki perilaku lepas. Di sini,scroll-margin-right Beri tahu pengguna bahwa ada gambar lain di sisi kanan. Gulingkan gambar pertama untuk melihat efek:

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

Coba sendiri

Contoh 3: Posisi lepas

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

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

Coba sendiri

Sintaks CSS

scroll-margin-right: 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 default. Lihat initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai default: 0
Inheritance: Tidak
Produksi animasi: Tidak didukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi: CSS3
Sintaks JavaScript: object.style.scrollMarginRight="20px"

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 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