CSS scroll-padding-right özelliği

Tanım ve Kullanım

scroll-padding-right öznitelik, konteynerin sağ kenarından alt bileşen yansıtma konumuna olan mesafeyi belirtir.

yansıtma konumu, durdurulduğunda alt bileşenin konteyner içinde yansıtma konumuna geldiği yerdir.

yansıtma konumu scroll-snap-align özellik ayarları, aynı zamanda CSS özelliklerinin de etkilenebileceği direction ve writing-mode etkisi.

Dikkat:Bu özellik, çekme konumu alt elementin sağ tarafında ayarlandığında geçerlidir.

Görmek İçin: scroll-padding-right Özelliği etkisini görmek için, alt element üzerinde scroll-snap-align Özellikleri, ebeveyn elementinde scroll-padding-right ve scroll-snap-type Özelliği.

Örnek

Örnek 1

Roller iç kenar boşluğunu, konteynerin sağ tarafından çekme konumuna 20px olarak ayarlar:

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

Kişisel Deneyimleyin

Örnek 2: Resim Kütüphanesi

scroll-padding-right Bu özellik, çekme davranışı olan resim galerilerinde kullanılabilir, resmi sabit elementin arkasından görünür hale getirir:

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

Kişisel Deneyimleyin

Örnek 3: Sağda滚动内边距

İki yönde çekme davranışı ayarlandığında, konteyner üzerinde de çekme davranışı ayarlanabilir: scroll-padding-right Özelliği. Bir sonraki elemente yatay olarak kaydırarak etkisini görelim:

#container > div {
  scroll-padding-right: 30px;
}

Kişisel Deneyimleyin

Örnek 4: Çekme Konumu

Yapmak İstediğiniz: scroll-padding-right Özelliği geçerli olur, çekme konumu alt elementin sağ tarafında ayarlanmalıdır. Bu örnekte,direction Değer 'rtl' özelliği, çekme konumunu alt elementin sağ tarafından sol tarafa taşıır. Bu tür kodları kullanırken,scroll-padding-right Artık geçerli olmayacak özellikler:

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

Kişisel Deneyimleyin

CSS Dilbilgisi

scroll-padding-right: auto|value|initial|inherit;

Özellik Değeri

Değer Açıklama
auto Öntanımlı Değer. Tarayıcı, iç kenar boşluğunu hesaplar.
length

px, pt, cm gibi birimlerle scroll-padding-right belirtin.

Negatif değerler kullanılmaz. Bakınız:CSS Birimleri.
% İç kenar boşluğunu içeren element genişliğinin yüzdesini belirtir.
initial Bu özelliği, öntanımlı değerine ayarlar. Bakınız initial.
inherit Bu özelliği, ebeveyn elementinden bu özelliği devralır. Bakınız inherit.

Teknik Ayrıntılar

Öntanımlı Değer: auto
Mirasçılık: Hayır
Animasyon Yapımı: Desteklenmiyor. Bakınız:Animasyon İle İlgili Özellikler.
Sürüm: CSS3
JavaScript Dilbilgisi: object.style.scrollPaddingRight="20px"

Tarayıcı Desteği

Tablo içindeki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü gösterir.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

İlgili sayfalar

Referans:CSS yönlendirme özelliği

Referans:CSS scroll-snap-align özelliği

Referans:CSS scroll-snap-type özelliği

Referans:CSS writing-mode özelliği