CSS scroll-margin-block Özelliği

Tanım ve Kullanım

scroll-margin-block Bu özellik, blok yönlendirmesinde, yerleştirme konumu (snap position) ile konteyner arasındaki mesafeyi belirtir.

Bu, kaydırmayı durdurduğunuzda, kaymanın hızla ayarlanması ve blok yönlendirmesi üzerindeki yerleştirme konumu ile konteyner arasındaki belirtilen mesafede durması anlamına gelir.

Bloklar yönlendirmesi, yeni satırın mevcut satır konumuna göre yerleştirildiği yöndür, bu da CSS display: block; olan etiketlerin (örneğin <p> ve <div> etiketleri) sayfadaki düzen tarzıdır. Bloklar yönlendirmesi yazı diliye bağlıdır, örneğin, Moğolca yeni satırlar soldan sağa sıralanır, bu yüzden bloklar yönlendirmesi de sağdan sola olurken, İngilizce sayfaların blokları yönlendirmesi aşağıya doğru olur. Bloklar yönlendirmesi CSS özelliği ile writing-mode tanımlanır.

Yerleştirme konumu, kaydırmayı durdurduğunuzda, alt bileşenin konteyner içinde yerleştirildiği konum demektir.

Dikkat:Bu özellik yalnızca blok yönlendirmede scroll-snap-align Özellik 'start' veya 'end' olarak ayarlandığında geçerlidir.

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

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

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

scroll-margin-block: 10px 50px;
  • Başlangıç mesafesi 10px
  • Bitiş mesafesi 50px

scroll-margin-block özelliği bir değere sahipse:

scroll-margin-block: 10px;
  • olarak

Başlangıç ve bitiş mesafeleri her ikisi de 10px scroll-margin-block özelliği etkisini görmek için, alt öğede scroll-margin-block ve scroll-snap-align özelliği, ebeveyn öğesinde scroll-snap-type özellikleri ile

CSS'nin scroll-margin-inline ve scroll-margin-block özellikleri, CSS özellikleri CSS scroll-margin-top özelliğivescroll-margin-bottomvescroll-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

Blok yönündeki yapıştırma konumunu ve kaydırılabilir konteyner arasındaki mesafeyi ayarlar:

div {
  scroll-margin-block: 10px;
}

Kişisel Deneyim

Örnek 2

Alt öğelerin writing-mode Özellik değeri vertical-rl olarak ayarlandığında, öğenin blok yönündeki başlangıç konumu üstten sağa, bitiş konumu alttan solda olur. Bu, kaydırma yapıştırma davranışını ve scroll-margin-block Özelliğin Çalışma Yöntemi:

div {
  scroll-margin-block: 20px 0;
  writing-mode: vertical-rl;
}

Kişisel Deneyim

CSS Dilbilgisi

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

Özellik Değeri

Değer Tanım
0 Varsayılan. Öğenin varsayılan scroll-margin-block değeri.
length

px, pt, cm gibi birimlerle belirlenen mesafeleri belirler. Negatif değerlere 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 öğesinden miras alır. Bakınız inherit.

Teknik Ayrıntılar

Varsayılan Değer: 0
Miras Özelliği: Hayır
Animasyon Yapımı: Desteklenmiyor. Bakınız:Animasyon İle İlgili Özellikler.
Sürüm: CSS3
JavaScript Dilbilgisi: object.style.scrollMarginBlock="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 scroll-margin-block-end Özelliği

Referans:CSS scroll-margin-block-start Özelliği

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

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

Referans:CSS writing-mode özelliği