CSS scroll-padding-inline özelliği

Tanım ve Kullanım

scroll-padding-inline Özelliği, satır içi yönlendirmede konteynerden alt elemanın yerleştirme pozisyonuna olan uzaklığı belirler.

Bu, kaydırmayı durdurduğunuzda, kayma hızlı bir şekilde ayarlanır ve konteynerle吸附位置 arasında belirlenen mesafede durur.

Satır içi yönlendirme, bir satırda mevcut karakterlere göre konumlandırılan yeni karakterin konumlandırılacağı yöndür. Bu, CSS display: inline; olan etiketlerin (örneğin <a> ve <strong> etiketleri) metin içindeki düzen tarzıdır. Satır içi yönlendirme, yazı diliye bağlıdır; örneğin, Arapçanın yeni karakterleri sağdan sola sıralanır, bu nedenle satır içi yönlendirme sağdan sola olur, İngilizce sayfaları ise soldan sağa olan satır içi yönlendirmeye sahiptir. Satır içi yönlendirme, CSS Özelliği ile belirlenebilir direction ve writing-mode tanımlanır.

Yerleştirme pozisyonu, kaydırmayı durdurduğunuzda, alt elemanın konteyner içinde yerleştirildiği pozisyondur.

Dikkat:Bu Özellik yalnızca satır içi yönlendirmedescroll-snap-align Özellik 'start' veya 'end' olarak ayarlandığında geçerlidir.

scroll-padding-inline Özelliği aşağıdaki Özelliklerin kısaltılmış hali olup:

• scroll-padding-inline-start
• scroll-padding-inline-end

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

Eğer scroll-padding-inline Özelliği iki değere sahipse:

scroll-padding-inline: 10px 50px;

• Başlangıç noktasının uzaklığı 10px olmalıdır
• Bitiş noktasının uzaklığı 50px olmalıdır

Eğer scroll-padding-inline Özelliği bir değere sahipse:

scroll-padding-inline: 10px;

• Başlangıç ve bitiş noktalarının hepsinin 10px uzaklıkta olması gerekmektedir

görünür scroll-padding-inline Özellik etkisinin görülmesi için, alt elemanlar üzerinde ayarlanmalıdır scroll-snap-align Özellik, ebeveyn eleman üzerinde ayarlanmalıdır scroll-padding-inline ve scroll-snap-type Özellik.

CSS'nin scroll-padding-block ve scroll-padding-inline Özellik ve CSS Özellikleri CSS scroll-padding-top özelliği、scroll-padding-bottom、scroll-padding-left ve scroll-padding-right son derece benzer, ancak scroll-padding-block ve scroll-padding-inline Özellik, blok yöntemi ve satır içi yönteme bağlıdır.

Örnek

Örnek 1

Satır içi yöndeki kaydırma iç kenar boşluğunu konteynerden yapıştırma konumuna 20px olarak ayarlayın:

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

Kişisel olarak deneyin

Örnek 2: Resim kitaplığı

Yapıştırma davranışı olan resim galerilerinde, scroll-padding-inline Özellik, resmin sabit element arkasından çıkmasını sağlar:

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

Kişisel olarak deneyin

Örnek 3

Konteyner elementinin writing-mode Özellik değeri 'vertical-rl' olarak ayarlandığında, satır içi yöndeki konteyner ve alt elementlerin başlangıç konumu soldan yukarıya, bitiş konumu sağdan aşağıya hareket eder. Bu, kaydırma yapıştırma davranışını ve scroll-padding-inline Özelliğin çalışma şekli:

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

Kişisel olarak deneyin

Örnek 4

Konteyner elementinin direction Özellik değeri 'rtl' olarak ayarlandığında, satır içi yöndeki konteyner ve alt elementlerin başlangıç konumu sağdan soldan hareket eder. Bu, kaydırma yapıştırma davranışını ve scroll-padding-inline Özelliğin çalışma şekli:

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

Kişisel olarak deneyin

CSS dilbilgisi

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

Özellik değeri

Teknik ayrıntılar

Tarayıcı desteği

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

İlgili sayfa

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