CSS scroll-padding-block özelliği

Tanımlama ve kullanım

scroll-padding-block Bu özellik, blok yönlendirmede, konteynerden alt elemanın yansıtma konumuna olan uzaklığıyı belirtir.

Bu, kaydırmayı durdurduğunuzda, kayma hızla ayarlanır ve blok yönlendirmede, yansıtma konumu ve konteyner arasındaki belirlenen mesafede durur.

Bloklama yönlendirme, mevcut satır konumuna göre bir sonraki satırın yerleştirileceği yöndür, bu da CSS display: block; olan etiketlerin (örneğin <p> ve <div> etiketleri) sayfadaki yerleşim tarzıdır. Bloklama yönlendirme yazı diliye bağlıdır, örneğin, Moğolcadaki yeni satırlar soldan sağa sıralanır, bu yüzden bloklama yönlendirme de sağdan sola doğru olur, İngilizce sayfalar ise aşağıya doğru bloklama yönlendirmesine sahiptir. Bloklama yönlendirme CSS özelliği ile belirlenir: writing-mode tanımlanır.

Yansıtma konumu, kaydırmayı durdurduğunuzda alt elemanın konteyner içinde yansıtma konumuna ulaştığı konum demektir.

Dikkat:Bu özellik yalnızca blok yönlendirmede geçerlidir:scroll-snap-align Özellik 'start' veya 'end' olarak ayarlandığında geçerlidir.

scroll-padding-block Bu özellik aşağıdaki özelliklerin kısaltılmış hali olup:

• scroll-padding-block-start
• scroll-padding-block-end

scroll-padding-block Özellik değeri farklı yöntemlerle ayarlanabilir:

Eğer scroll-padding-block özelliği iki değere sahipse:

scroll-padding-block: 10px 50px;

• Başlangıç yerinin uzaklığı 10px
• Bitiş yerinin uzaklığı 50px

Eğer scroll-padding-block özelliği bir değere sahipse:

scroll-padding-block: 10px;

• Başlangıç ve bitiş yerlerinin uzaklığı 10px

Görmek için scroll-padding-block Özellik etkisi, alt eleman üzerinde ayarlanmalıdır scroll-snap-align Özelliği, ebeveyn elemanında scroll-padding-block ve scroll-snap-type Özelliği ile

CSS'nin scroll-padding-block ve scroll-padding-inline Özellik, CSS özellikleri CSS scroll-padding-top özelliği,scroll-padding-bottom,scroll-padding-left ve scroll-padding-right çok benzer, ancak scroll-padding-block ve scroll-padding-inline Özellik, blok yönlü ve satır içi yönlüye bağlıdır.

Örnek

Örnek 1

Blok yönlüde, kaydırma iç boşluğunu konteynerden sabit konuma 20px olarak ayarlar:

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

Kişisel Deneyim

Örnek 2: Resim Kütüphanesi

scroll-padding-block Özelliği, resim galerilerinde resimleri sabit bir elementin altına itmek için kullanılabilir:

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

Kişisel Deneyim

Örnek 3

Konteyner elemanının writing-mode Özellik değeri vertical-rl olarak ayarlandığında, blok yönlüde konteyner ve alt elemanlarının başlangıç konumu üstten sağa, bitiş konumu alttan solda hareket eder. Bu, kaydırma yapıştırma davranışını ve scroll-padding-block Özelliğin Çalışma Yöntemi:

#container {
  scroll-padding-block: 20px 0;
  writing-mode: vertical-rl;
}

Kişisel Deneyim

CSS Dilbilgisi

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

Özellik Değeri

Teknik Ayrıntılar

Tarayıcı Desteği

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

İlgili sayfalar

Referans:CSS scroll-padding-block-end özelliği

Referans:CSS scroll-padding-block-start özelliği

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

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

Referans:CSS writing-mode özelliği