CSS scroll-padding özelliği

Tanım ve Kullanım

scroll-padding Bu özellik, konteynerden alt öğenin sıçrama pozisyonuna olan mesafeyi belirtir.

Bu, kaydırma durdurulduğunda, kaydırmanın hızla ayarlanıp konteynerden odaklanılan alt öğenin sıçrama pozisyonuna belirtilen mesafede durmasını anlamına gelir.

Sıçrama pozisyonu, bir alt öğenin kaydırma durdurulduğunda, konteyner içinde sabit bir konumda olduğu yerdir.

scroll-padding Bu özellik, aşağıdaki özelliklerin kısaltılmış halidır:

scroll-padding Özellik değerleri farklı yollarla ayarlanabilir:

Eğer scroll-padding özelliği dört değer içeriyorsa:

scroll-padding: 15px 30px 60px 90px;
  • Üst aralığı 15px
  • Sağ aralığı 30px
  • Alt aralığı 60px
  • Sol aralığı 90px

Eğer scroll-padding özelliği üç değer içeriyorsa:

scroll-padding: 15px 30px 60px;
  • Üst aralığı 15px
  • Sol ve sağ mesafeleri 30px'dır
  • Alt aralığı 60px

Eğer scroll-padding özelliği iki değer içeriyorsa:

scroll-padding: 15px 30px;
  • Üst ve alt aralığı 15px
  • Sol ve sağ mesafeleri 30px'dır

scroll-padding özelliği bir değer içeriyorsa:

scroll-padding: 10px;
  • dört yönün tüm mesafeleri 10px'dır

görünmesi gerekir scroll-padding özelliklerinin etkisini görmek için scroll-snap-align özellikleri, ebeveyn elementinde ayarlandıktan sonra scroll-padding ve scroll-snap-type özellikleri.

Dikkat:Aşağıdaki örnekte, tüm kenarlar için kaydırma iç boşluğu ayarlanmıştır, ancak scroll-snap-align "start" olarak ayarlandığı için sadece üst kenarın kaydırma davranışı değişmiştir.

Örnek

Örnek 1

Konteynerden sabit konuma 20px'lik kaydırma iç boşluğu ayarlayın:

div {
  scroll-padding: 20px;
}

Deneyin

Örnek 2: Görsel kütüphanesi

scroll-padding Bu özellik, sabit davranışa sahip görsel galerilerde kullanılabilir, böylece görseller sabit elementin altına itilir:

#container {
  scroll-padding: 30px 0 0 0;
}
Sabit üst element
Pekin Rakip Wuhan Lale Hangzhou

Deneyin

Örnek 3: Alt ve sağ kenarların kaydırma iç boşluğu ayarlanması

scroll-padding Özellik, konteynerin alt ve sağ kenarlarında aynı anda ayarlanabilir. Daha fazla etki görmek için aşağıdaki elemente yatay ve dikey olarak kaydırın:

#container {
  scroll-padding: 0 10px 30px 0;
}





Deneyin

CSS dilbilgisi

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

Özellik değeri

Değer Açıklama
auto Varsayılan değer. Tarayıcı iç boşluğu hesaplar.
length

px, pt, cm gibi birimlerle kaydırma iç boşluğu belirleyin.

Negatif değerler kullanılmaz. Ayrıca bakınız:CSS Birimler.
% İçerik elementi genişliğine göre yüzdelik iç boşluk belirleyin.
initial Bu özelliği varsayılan değerine ayarlayın. Ayrıca bakınız initial.
inherit Bu özelliği ebeveyn elementinden miras alır. Ayrıca bakınız inherit.

Teknik ayrıntılar

Varsayılan değer: auto
Miras: Hayır
Animasyon yapımı: Desteklenmiyor. Ayrıca bakınız:Animasyonla ilgili özellikler.
Sürüm: CSS3
JavaScript dilbilgisi: object.style.scrollPadding="20px"

Tarayıcı desteği

Tablodaki sayılar, 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

Kaynak:CSS scroll-padding-bottom özelliği

Kaynak:CSS scroll-padding-left özelliği

Kaynak:CSS scroll-padding-right özelliği

Kaynak:CSS scroll-padding-top özelliği

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

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