CSS scroll-margin-top özelliği

Tanım ve Kullanım

scroll-margin-top öznitelikle belirtilir.

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

Dikkat:Bu özellik, tutunma konumu alt elemanın üstüne ayarlandığında yalnızca etkili olur.

görmek için scroll-margin-top özniteliklerinin etkisini görmek için, alt elemanda scroll-margin-top ve scroll-snap-align öznitelik, ebeveyn elemanda scroll-snap-type öznitelik.

Örnek

Örnek 1

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

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

Kişisel Olarak Deneyin

Örnek 2: Resim Kütüphanesi

scroll-margin-top öznitelik, tutunma davranışı olan resim galerilerinde kullanılabilir. Buradascroll-margin-top Kullanıcıya üstte bir resmin daha olduğunu bilmelerini sağlayın. İlk resmi kaydırarak etkisini görmek için geçin:

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

Kişisel Olarak Deneyin

Örnek 3: Tutunma Konumu

Yapmak için scroll-margin-top öznitelik etkili hale gelir, tutunma konumu alt elemanın üstüne ayarlanmalıdır. Bu örnektewriting-mode öznitelik, alt elemanın sağ tarafına konum değiştirir. Bu tür kodları kullanarakscroll-margin-top Artık etkili olmayacak özellikler:

#container {
  writing-mode: vertical-rl;
}
#container > div {
  scroll-margin-top: 30px;
  scroll-snap-align: start none;
}

Kişisel Olarak Deneyin

CSS Dilbilgisi

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

Özellik Değeri

Değer Açıklama
0 Üst kaydırma dış kenar boşluğu 0'dır. Bu varsayılan değerdir.
length

px, pt, cm gibi birimlerle belirtilen üst kaydırma dış kenar boşluğu değeri. 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 elemanından miras alır. Bakınız inherit.

Teknik Ayrıntılar

Varsayılan Değer: 0
Mirasçılık: Hayır
Animasyon Yapımı: Desteklenmiyor. Bakınız:Animasyon İle İlgili Özellikler.
Sürüm: CSS3
JavaScript Dilbilgisi: object.style.scrollMarginTop="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