CSS scroll-padding-top özelliği

Tanım ve Kullanım

scroll-padding-top Özellik, konteynerın üstünden alt öğenin kilitleme konumuna kadar olan mesafeyi belirtir.

Kilitleme konumu, kaydırma durdurulduğunda alt öğenin konteyner içinde yerleştirildiği konum demektir.

吸附位置由 scroll-snap-align etkisi de göz önünde bulundurulmalıdır. Bu özellik ayarı, aynı zamanda CSS özelliklerinin ve writing-mode direction

etkisini göz önünde bulundurun.Dikkat:

Bu özellik, alt öğede yapışkan konum ayarlandığında yalnızca etkili olur. scroll-padding-top Bu özellikleri görmek için scroll-snap-align Bu özelliklerin etkisi, ebeveyn öğesinde ayarlanmalıdır scroll-padding-top ve scroll-snap-type Özellik.

Örnek

Örnek 1

Konteynerin üstünden yapışkan konuma 20px mesafede kaydırma iç dilimini ayarlayın:

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

Kişisel Deneyim

Örnek 2: Resim Kütüphanesi

scroll-padding-top Bu özellik, yapışkan davranışa sahip görsel galerilerde kullanılabilir ve resimleri sabit bir elementin altına itebilir:

#container {
  scroll-padding-top: 30px;
}

Kişisel Deneyim

Örnek 3: Üstteki Kaydırma İç Dilimi

İki yönde de yapışkan davranış ayarlandığında, konteyner üzerinde de yapışkan davranış ayarlanabilir: scroll-padding-top Bu özellik, vertical-rl yazı yönlendirme ayarı ile birlikte kullanılabilir. Daha fazla bilgi için:

#container {
  scroll-padding-top: 30px;
}

Kişisel Deneyim

Örnek 4: Yapışkan Konum

Yapışkan konumunu ayarlamak için scroll-padding-top Bu özellik etkili olduğunda, yapışkan konumun, alt öğenin üstüne ayarlanması gerekir. Bu örnekte,writing-mode Bu tür kodları kullanırken,scroll-padding-top Artık etkili olmayacak özellikler:

#container {
  writing-mode: vertical-rl;
  scroll-padding-top: 30px;
}
#container > div {
  scroll-snap-align: start none;
}

Kişisel Deneyim

CSS Dilbilgisi

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

Özellik Değeri

Değer Açıklama
auto Varsayılan Değer. Tarayıcı, iç dilimi hesaplar.
length

px, pt, cm gibi birimlerle scroll-padding-top belirleyin.

Negatif değerlerin kullanılması izin verilmez. Ayrıca bakınız:CSS Birimleri.
% İç dolgu genişliğini iç dilim olarak belirleyin.
initial Bu özelliği, varsayılan değerine ayarlar. Ayrıca bakınız: initial.
inherit Bu özelliği, ebeveyn öğesinden bu özelliği devralır. Ayrıca bakınız: inherit.

Teknik Ayrıntılar

Varsayılan Değer: auto
Miras Yönlendirme: Hayır
Animasyon Yapımı: Desteklenmiyor. Ayrıca bakınız:Animasyon İle İlgili Özellikler.
Sürüm: CSS3
JavaScript Dilbilgisi: object.style.scrollPaddingTop="20px"

Tarayıcı Desteği

Tablozdaki 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