CSS scroll-padding-inline-start özelliği

Tanım ve Kullanım

scroll-padding-inline-start özellik, konteynerin başlangıç konumundan alt elemanın yapışma pozisyonuna kadar satır içi yönde mesafeyi belirtir.

Bu, kaydırmayı durdurduğunuzda, kayma hızla ayarlanır ve konteyner ile yapışma pozisyonu arasında belirlenen mesafede durur.

Satır içi yönelim, bir karakterin mevcut karaktere göre satır içinde konumlandırılacağı yöndür, bu da CSS display: inline; olan etiketlerin (örneğin <a> ve <strong> etiketleri) metin içindeki düzen tarzıdır. Satır içi yönelim yazı diliye bağlıdır, örneğin Arapça yeni karakterler sağdan sola dizilir, bu yüzden satır içi yönelim sağdan sola olacaktır, İngilizce sayfaların satır içi yönelimi ise soldan sağa olacaktır. Satır içi yönelim CSS özelliği ile belirlenebilir direction ve writing-mode tanımı.

Yapışma pozisyonu, kaydırmayı durdurduğunuzda, alt elemanın konteyner içinde yapıştığı konum demektir.

Dikkat:Bu özellik yalnızca satır içi yönde ayarlanmıştır scroll-snap-align özellik 'start' olduğunda etkilidir.

görülmesi scroll-padding-inline-start özellik etkisini görmek için, alt elemanlarda ayarlanmalıdır scroll-snap-align özellik ve ebeveyn elemanında scroll-padding-inline-start ve scroll-snap-type Özellik.

Örnek

Örnek 1

Konteynerin başlangıç konumundan çekme konumuna satır içi yönde olan kaydırma iç dolgusunu 20px olarak ayarlayın:

div {
  scroll-padding-inline-start: 20px;
}

Deneyin

Örnek 2: Resim Kütüphanesi

scroll-padding-inline-start Bu özellik, sabit bir öğenin arkasından resimler çıkararak çekme davranışı olan görsel galerilerde kullanılabilir:

#container {
  scroll-padding-inline-start: 30px;
}

Deneyin

Örnek 3

Konteyner öğesinin writing-mode Özellik değeri 'vertical-rl' olarak ayarlandığında, satır içi yönde konteyner ve alt öğelerin başlangıç konumu üstten sağa taşınır. Bu, kaydırma yapıştırma davranışını ve scroll-padding-inline-start Özelliğin Çalışma Yöntemi:

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

Deneyin

Örnek 4

Konteyner öğesinin direction Özellik değeri 'rtl' olarak ayarlandığında, satır içi yönde konteyner ve alt öğelerin başlangıç konumu sağdan soldan sola taşınır, konteyner ve alt öğelerin bitiş konumu sağdan tabana doğru düşer. Bu, kaydırma yapıştırma davranışını ve scroll-padding-inline Özelliğin Çalışma Yöntemi:

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

Deneyin

CSS Dilbilgisi

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

Özellik Değeri

Teknik Ayrıntılar

Tarayıcı Desteği

Tabloda görülen rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

İ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