CSS scroll-margin-right özelliği

Tanım ve Kullanım

scroll-margin-right Özelliği ile adsorbsiyon pozisyonu ile konteyner arasındaki mesafeyi belirler.

Adsorbsiyon pozisyonu, oğul elementinin durdurulduğunda, konteyner içinde sabit bir konumda tutulduğu pozisyondur. Adsorbsiyon pozisyonu, ve Özelliği ayarlanmış olabilir, ancak CSS özelliklerinin de etkisi altında olabilir. direction Özelliklerinin etkisini görmek için, oğul elementinde writing-mode yazı modu özelliği ayarları, aynı zamanda CSS özelliklerinin de etkisi altında olabilir.

EtkisiniDikkat:

Bu özellik, oğul elementinin sağ kenarına adsorbsiyon pozisyonu ayarlandığında yalnızca etkili olur. scroll-margin-right görmek istediğiniz scroll-margin-right Özelliklerinin etkisini görmek için, oğul elementinde ve scroll-snap-align Özelliği, ebeveyn elementinde ayarlayın ve scroll-snap-type

Özellik.

Örnek

Kilavuz 1

Adsorbsiyon pozisyonu ile konteyner arasındaki kaydırma dış kenar marjını 20px olarak ayarlayın:
  div {
}

Kişisel Deneyim

scroll-margin-right: 20px;

scroll-margin-right Kilavuz 2: Resim Kütüphanesiscroll-margin-right Özellik, adsorbsiyon davranışı olan resim galerilerinde kullanılabilir. Burada

Kullanıcıya sağ kenarda bir resmin daha olduğunu bilmeleri için. İlk resmi kaydırarak etkisini görün:
  scroll-margin-right: 30px;
}

Kişisel Deneyim

#container > img {

Kilavuz 3: Adsorbsiyon Pozisyonu scroll-margin-right Özelliği etkili olur, oğul elementinin sağ kenarına adsorbsiyon pozisyonu ayarlanmalıdır. Bu örnektedirection Özelliği, oğul elementinin sağ kenarından sol kenarına değiştirir. Bu tür bir kod kullanılarakscroll-margin-right Artık etkili olmayacak özellikler:

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

Kişisel Deneyim

CSS Dilbilgisi

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

Özellik Değeri

Değer Açıklama
0 Sol kenarın sol kenarına olan kaydırma dış kenar marjı 0'dır. Varsayılan değer.
length

px, pt, cm gibi birimlerle, sol kenarın sol kenarına olan kaydırma dış kenar marjını belirleyin. Negatif değerler kullanılabilir.

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.scrollMarginRight="20px"

Tarayıcı Desteği

Tablo içindeki 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