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

Tanım ve kullanım.

scroll-margin-inline-end Özellik, satır içi yönelimde sabitlenme konumu ile konteyner arasındaki mesafeyi belirtir.

Bu, kaydırma işlemi durduğunuzda, hızla ayarlanır ve belirtilen mesafede durar, bu mesafe, alt elemanın son端的 sabitlenme konumu ile konteyner arasındaki mesafedir.

Satır içi yönelim, bir karakterin mevcut karaktere göre satır içinde 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ö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 sola sağa olur. Satır içi yönelim CSS özelliği aracılığıyla belirlenebilir direction ve writing-mode Tanım.

Sabitlenme konumu, kaydırma işlemi durduğunuzda alt elemanın konteyner içinde sabitlendiği konum anlamına gelir.

Dikkat:Dikkat: scroll-snap-align Bu özellik yalnızca satır içi yönelimde ayarlandığında geçerlidir.

Özellik 'end' olarak ayarlandığında yalnızca çalışır. scroll-margin-inline-end Özelliği etkisini görmek için, çocuğu elementinde scroll-margin-inline-end ve scroll-snap-align Özelliği, ebeveyn elementinde scroll-snap-type Özellikleri ile

CSS'nin scroll-margin-inline ve scroll-margin-block Özellikler, CSS özellikleri CSS scroll-margin-top özelliği,scroll-margin-bottom,scroll-margin-left ve scroll-margin-right Oldukça benzer, ancak scroll-margin-block ve scroll-margin-inline Özellik, blok yönelimine ve satır içi yönelimine bağlıdır.

Örnek

Örnek 1

Satır içi yönelimde tutturucudan kayan konteynıra olan mesafeyi ayarlar:

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

Kişisel Deneyim

Örnek 2

<div> elementinin writing-mode Özellik değeri vertical-rl olarak ayarlandığında, satır içi yönelim aşağı doğru olur. Sonuç olarak, elementin ucu sağdan aşağı doğru hareket eder:

div {
  scroll-margin-inline-end: 20px;
  writing-mode: vertical-rl;
}

Kişisel Deneyim

Örnek 3

<div> elementinin direction Özellik değeri rtl olarak ayarlandığında, satır içi yönelim sağdan sola doğru olur. Sonuç olarak, elementin ucu sağdan sola doğru hareket eder:

div {
  scroll-margin-inline-end: 20px;
  direction: rtl;
}

Kişisel Deneyim

CSS Dilbilgisi

scroll-margin-inline-end: 0|value|initial|inherit;

Özellik Değeri

Değer Açıklama
0 Varsayılan Değer. Elementin varsayılan scroll-margin-inline-end mesafesi.
length

px, pt, cm gibi birimlerle belirlenen mesafeleri belirler. Negatif değerlerin kullanımı izin verilir.

Bakınız:CSS Birimleri.

initial Bu özelliği varsayılan değerine ayarlar. Bakınız initial.
inherit Bu özelliği ebeveyn elementinden devralır. Bakınız inherit.

Teknik Ayrıntılar

Varsayılan Değer: 0
Devralabilirlik: Hayır
Animasyon Yapımı: Desteklenmiyor. Bakınız:Animasyon İle İlgili Özellikler.
Sürüm: CSS3
JavaScript Dilbilgisi: object.style.scrollMarginInlineEnd="20px"

Tarayıcı Desteği

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

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