CSS scroll-margin-left özelliği

Tanım ve Kullanım

scroll-margin-left öznitelikle belirtilir. Tutunma konumu ile konteyner arasındaki mesafeyi belirler.

Tutunma konumu, alt öğenin durdurulduğunda konteyner içinde sabit konumuna gelen konumudur. Tutunma konumu scroll-snap-align öznitelik ayarları, aynı zamanda CSS özniteliklerinin direction ve writing-mode etkisini gösterir.

Dikkat:Bu özellik, tutunma konumu alt öğenin soluna ayarlandığında yalnızca etkili olur.

görmek için scroll-margin-left özniteliklerinin etkisini görmek için, alt öğede scroll-margin-left ve scroll-snap-align öznitelik, ebeveyn öğesinde scroll-snap-type öznitelik.

Örnek

Örnek 1

Tutunma konumu ile konteyner arasındaki kaydırma dış kenar boşluğunu 20px olarak ayarlar:

div {
  scroll-margin-left: 20px;
}

Kendiniz Deneyin

Örnek 2: Resim Kütüphanesi

scroll-margin-left öznitelik, tutunma davranışı olan resim galerilerinde kullanılabilir. Buradascroll-margin-left Kullanıcıya solunda bir resmin daha olduğunu bildirmek için. İlk resmi kaydırarak etkisini görmek için:

#container > img {
  scroll-margin-left: 30px;
}

Kendiniz Deneyin

Örnek 3: Tutunma Konumu

İçin scroll-margin-left öznitelik etkili hale getirildiğinde, tutunma konumu alt öğenin soluna ayarlanmalıdır. Bu örnektedirection özellik, alt öğenin solundan sağa doğru konum değişimini yapar. Bu tür kodlar kullanılarakscroll-margin-left Artık etkili olmayacak özellikler:

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-left: 30px;
  scroll-snap-align: none start;
}

Kendiniz Deneyin

CSS Dilbilgisi

scroll-margin-left: 0|value|initial|inherit;

Özellik Değeri

Değer Açıklama
0 Sol kenarlıktaki kaydırma dış kenar boşluğu 0'dır. Öntanımlı değer.
length

px, pt, cm gibi birimlerle belirtilen değer, sol kenarlıktaki kaydırma dış kenar boşluğunu belirtir. Negatif değerler kullanılabilir.

Bakınız:CSS Birimleri.
initial Bu özelliği öntanımlı değerine ayarlar. Bakınız initial.
inherit Bu özelliği ebeveyn öğesinden devralır. Bakınız inherit.

Teknik Ayrıntılar

Öntanımlı 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.scrollMarginLeft="20px"

Tarayıcı Desteği

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

İ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