CSS scroll-padding-bottom özelliği

定义和用法

scroll-padding-bottom 属性指定从容器底部到子元素吸附位置的距离。

吸附位置是指当你停止滚动时，子元素在容器中吸附到位的位置。吸附位置通过 scroll-snap-align 属性设置，但也可能受到 CSS 属性 direction ve writing-mode 的影响。

Dikkat:Bu özellik, çekiş konumu çocu elementinin altına ayarlandığında yalnızca geçerlidir.

görmek için scroll-padding-bottom Özelliği etkisi görmek için, çocu elementinde scroll-snap-align Özelliklerini, ebeveyn elementinde scroll-padding-bottom ve scroll-snap-type Özelliği.

Örnek

Örnek 1

Konteynerin altından çekiş konumuna kadar olan滚动填充i 20px olarak ayarlayın:

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

Kişisel Deneyim

Örnek 2: Resim Kütüphanesi

Çekiş davranışı olan bir resim galerisinde, scroll-padding-bottom Özelliği, resmi sabit elementin üzerine itebilir:

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

Kişisel Deneyim

Örnek 3: Alt滚动填充

İki yönde çekiş davranışı ayarlandığında, konteyner üzerinde de çekiş davranışı ayarlanabilir: scroll-padding-bottom Özelliği. Bir sonraki elemente dikey olarak滚动以查看效果:

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

Kişisel Deneyim

Örnek 4: Çekiş Konumu

Aşağıdaki örnekte, scroll-padding-bottom Özelliği etkili olur, çekiş konumu, çocu elementinin altına ayarlanmalıdır. Bu örnekte,writing-mode Özelliği, çocu elementinin altına çekiş konumunu sağa değiştirir. Bu tür kodları kullanırken,scroll-padding-bottom Artık etkili olmayacak özellikler:

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

Kişisel Deneyim

CSS Dilbilgisi

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

Özellik Değeri

Değer Açıklama
auto Öntanımlı Değer. Tarayıcı, doldurumu hesaplar.
length

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

Negatif değerler kullanılmaz. Ayrıca bakınız:CSS Birimleri.
% İç boşluk olarak element genişliğinin yüzdesini belirtin.
initial Bu özelliği, öntanımlı değerine ayarlar. Ayrıca bakınız: initial.
inherit Bu özelliği, ebeveyn elementinden kalıtır. Ayrıca bakınız: inherit.

Teknik Ayrıntılar

Öntanımlı Değer: auto
Kalıtım: Hayır
Animasyon Yapımı: Desteklenmiyor. Ayrıca bakınız:Animasyon İle İlgili Özellikler.
Sürüm: CSS3
JavaScript Dilbilgisi: object.style.scrollPaddingBottom="20px"

Tarayıcı Desteği

Tabloda 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

相关页面

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