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

Tanımlama ve kullanım

scroll-padding-inline-end Bu özellik, konteynerin sonundan alt elemanın hizalama konumuna kadar satır içi yönelim üzerindeki mesafeyi belirtir.

Bu, kaydırmayı durdurduğunuzda, hızlı bir şekilde ayarlanır ve hizalama konumu ile konteyner arasında belirlenen mesafede durur.

Satır içi yönelim, bir karakterin mevcut karaktere göre satır içindeki konumuna yerleştirildiği yön demektir, 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çanın yeni karakterleri sağdan sola dizilir, bu yüzden satır içi yönelim sağdan sola olurken, İngilizce sayfaların satır içi yönelimi soldan sağa olur. Satır içi yönelim, CSS özelliği aracılığıyla ayarlanabilir direction ve writing-mode Tanımlama.

Hizalama pozisyonu, kaydırmayı durdurduğunuzda, alt elemanın konteyner içinde hizalanması gereken konum demektir.

Dikkat:Bu özellik sadece scroll-snap-align Özellik, satır içi yönelim olarak 'end' ayarlandığında etkili olur.

görmek için ayarlanmalıdır scroll-padding-inline-end özelliklerinin etkisi, çocuğa öğesinde scroll-snap-align özellikleri, ebeveyn öğesinde scroll-padding-inline-end ve scroll-snap-type Özellik.

Örnek

Örnek 1

Konteynerin sonundan hizalama konumuna satır içi yönde滚动内边距 olarak 20px ayarlanır:

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

Kişisel olarak deneyin

Örnek 2: Resim Kütüphanesi

scroll-padding-inline-end Özellik, hizalama davranışı olan görsel galerilerde kullanılabilir, resimleri sabit bir elementin arkasından çıkarmak için:

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

Kişisel olarak 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 soldan yukarıya, ucun konumu sağdan aşağıya hareket eder. Bu, kaydırma hizalama davranışını ve scroll-padding-inline-end Özelliğin Çalışma Yöntemi:

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

Kişisel olarak deneyin

Örnek 4

Konteyner öğesinin direction Özellik değeri 'rtl' olarak ayarlandığında, satır içi yönde konteyner ve alt öğelerin ucundaki konum sağdan soldan hareket eder. Bu, kaydırma hizalama davranışını ve scroll-padding-inline-end Özelliğin Çalışma Yöntemi:

#container {
  scroll-padding-inline-end: 20px;
  direction: rtl;
}

Kişisel olarak deneyin

CSS Dilbilgisi

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

Özellik Değeri

Teknik Ayrıntılar

Tarayıcı Desteği

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

相关页面

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