CSS scroll-margin özelliği

Tanım ve Kullanım

scroll-margin Bu özellik, yankı konumu ile konteyner arasındaki mesafeyi belirler.

Bu, durdurulduğunuzda, kaydırma hızlı bir şekilde ayarlanır ve yankı konumu (snap position) ile konteyner arasında belirlenen mesafede durur.

Yankı konumu, çocuk elementin durdurulduğunda, konteyner içinde yankılanarak konumlandığı noktadır.

scroll-margin Bu özellik, aşağıdaki özelliklerin kısaltılmış hali olup:

scroll-margin Özelliğin değeri farklı yöntemlerle ayarlanabilir:

Eğer scroll-margin özelliği dört değer içeriyorsa:

scroll-margin: 15px 30px 60px 90px;
  • Üst kenar mesafesi 15px
  • Sağ kenar mesafesi 30px
  • Alt kenar mesafesi 60px
  • Sol kenar mesafesi 90px

Eğer scroll-margin özelliği üç değer içeriyorsa:

scroll-margin: 15px 30px 60px;
  • Üst kenar mesafesi 15px
  • Sağ ve sol mesafeleri 30px'tır
  • Alt kenar mesafesi 60px

Eğer scroll-margin özelliği iki değer içeriyorsa:

scroll-margin: 15px 30px;
  • Üst ve alt mesafeleri 15px'tır
  • Sağ ve sol mesafeleri 30px'tır

scroll-margin özelliği bir değer içeriyorsa:

scroll-margin: 10px;
  • dört yönün mesafeleri 10px'tır

görmek için scroll-margin Özelliklerinin etkisini görmek için, çocuk elementinde scroll-margin ve scroll-snap-align Özelliği ve ebeveyn elementinde scroll-snap-type Özellik.

Dikkat:Aşağıdaki örnekte, tüm kenarlara kaydırma dış kenar boşluğu ayarlanmıştır, ancak scroll-snap-align Özellik "start" olarak ayarlandığı için yalnızca üst kaydırma dış kenar boşluğu değişmiştir.

Örnek

Örnek 1

Kapsayıcı ile çekme konumunu 20px olarak ayarlayın:

div {
  scroll-margin: 20px;
}

Kişisel olarak deneyin

Örnek 2: Görsel kitaplık

scroll-margin Bu özellik, tutturma davranışı olan görsel kitaplıklarında kullanılabilir. Burada,scroll-margin Kullanıcının solunda bir resmin daha olduğunu görmesini sağlayın. İlk resmi kaydırdıktan sonra etkisini görmek için:

#container > img {
  scroll-margin: 0 0 0 30px;
}
Pekin Rakımcı Wuhan Lale Hangzhou

Kişisel olarak deneyin

Örnek 3: Alt ve sağdaki kaydırma dış kenar boşluğunu ayarlayın

Elementin altı ve sağında ayarlanabilir scroll-margin Özellik. Düzgünce yatay ve dikey olarak kaydırılan bir sonraki elementi görmek için:

#container > div {
  scroll-margin: 0 10px 30px 0;
}





Kişisel olarak deneyin

CSS dilbilgisi

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

Özellik değeri

Değer Açıklama
0 Kaydırma dış kenar boşluğu sıfırdır. Varsayılan değer.
length

px, pt, cm gibi birimlerle belirtilen kaydırma dış kenar boşluğunu tanımlar. Negatif değerlerin kullanılması 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:Animasyonla ilgili özellikler.
Sürüm: CSS3
JavaScript dilbilgisi: object.style.scrollMargin="20px"

Tarayıcı desteği

Tabloda bulunan rakamlar, bu özelliği tamamen destekleyen ilk tarayıcı sürümünü gösterir.

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

İlgili sayfalar

Referans:CSS scroll-margin-bottom özelliği

Referans:CSS scroll-margin-left özelliği

Referans:CSS scroll-margin-right özelliği

Referans:CSS scroll-margin-top özelliği

Referans:CSS scroll-snap-align özelliği

Referans:CSS scroll-snap-type özelliği