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

Tanım ve Kullanım

scroll-margin-inline-start Özellik, satır yönünde çekme konumu ile konteyner arasındaki mesafeyi belirler.

Bu, kaydırmayı durdurduğunuzda, hızla ayarlanır ve alt öğenin başlangıç konumu ile konteyner arasında, satır yönünde belirlenen mesafede durur.

Satır yönü, bir karakterin mevcut karaktere göre satırda konumlandırılma yöntemidir, bu da <a> ve <strong> gibi etiketlerin (CSS display: inline; olan) metin içindeki düzen tarzıdır. Satır yönü yazı diliye bağlıdır, örneğin Arapçanın yeni karakterleri sağdan sola dizilir, bu yüzden satır yönü sağdan sola olan, İngilizce sayfaların satır yönü ise soldan sağa olan. Satır yönü CSS özelliği ile belirlenir. direction ve writing-mode Tanımı.

Tutunma konumu, kaydırmayı durdurduğunuzda, alt elementlerin konteyner içinde tutunma konumuna geldiği konum demektir.

Dikkat:Bu özellik yalnızca scroll-snap-align özelliklerinin satır içi yönü 'start' olarak ayarlandığında etkilidir.

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

Örnek

Örnek 1

Satır içi yön üzerinde, tutunma konumundan kayan konteynıra olan mesafeyi ayarlar:

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

Kişisel Olarak Deneyin

Örnek 2

<div> elementinin writing-mode Özellik değeri vertical-rl olarak ayarlandığında, satır içi yön aşağıya olur. Sonuç olarak, elemanın başlangıç konumu soldan tepeye taşınır:

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

Kişisel Olarak Deneyin

Örnek 3

<div> elementinin direction Özellik değeri rtl olarak ayarlandığında, satır içi yön sağdan sola olur. Sonuç olarak, elemanın başlangıç konumu sol tarafa (orijinal yönden bakıldığında hala sağdan başlar, ancak buradaki 'sol' orijinal öntanımlı yönün soluna atıfta bulunur) ayarlanır:

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

Kişisel Olarak Deneyin

CSS Dilbilgisi

inset-inline-start: 0|value|initial|inherit;

Özellik Değeri

Teknik Ayrıntılar

Tarayıcı Desteği

Tabloda gösterilen 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