CSS scroll-margin-block-start özelliği

Tanım ve Kullanım

scroll-margin-block-start Bu özellik, blok yöneliminde sabitlenmiş konum ile konteyner arasındaki mesafeyi belirtir.

Bu, kaydırma durdurduğunuzda, kaydırma hızla ayarlanır ve belirtilen mesafede, blok yöneliminde alt elementin başlangıç konumu ile konteyner arasındaki sabitlenmiş konumda durur.

Blok yönelimi, bir satırın mevcut satıra göre konumlandırılacağı yöndür, bu da CSS display: block; etiketlerinin (örneğin <p> ve <div> etiketleri) sayfadaki yerleşim şeklidir. Blok yönelimi yazışma diliye bağlıdır, örneğin Moğolca'da yeni satır soldan sağa dizilir, bu yüzden blok yönelimi sağdan sola olan, İngilizce sayfaların blok yönelimi ise aşağıya doğru olan. Blok yönelimi CSS özelliği ile belirlenir. writing-mode 定义。

Tanımı.

Yankı konumu, kaydırmayı durdurduğunuzda, çocuğu elementinin konteyner içinde yankılanarak konumlandırıldığı konum demektir.Uyarı: scroll-snap-align Bu özellik sadece blok yönünde

Özellik 'start' olarak ayarlandığında yalnızca etkilidir. scroll-margin-block-start Özelliğinin etkisini görmek için, çocuğu elementinde scroll-margin-block-start ve scroll-snap-align Özelliği, ebeveyn elementinde scroll-snap-type Özellikleri.

CSS'nin scroll-margin-inline ve scroll-margin-block Özellik, 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ünde, hiza konumunu konteynerle arasındaki滚动外边距设置为 20px：

div {
  scroll-margin-block-start: 20px;
}

Kendiniz Deneyin

Örnek 2

<div> elementinin writing-mode Özellik değeri vertical-rl olarak ayarlandığında, blok yönü sağdan sola olur. Sonuç olarak, elemanın başlangıç kısmı üstten sağa doğru hareket eder:

div {
  scroll-margin-block-start: 50px;
  writing-mode: vertical-rl;
}

Kendiniz Deneyin

CSS Dilbilgisi

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

Özellik Değeri

Değer Açıklama
0 Öntanımlı. Elemanın öntanımlı scroll-margin mesafesi.
length

px, pt, cm gibi birimlerle belirlenen mesafeleri belirler. Negatif değerlere izin verilir.

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

Teknik Ayrıntılar

Öntanımlı Değer: 0
Miras Edilebilirlik: Hayır
Animasyon Yapımı: Desteklenmiyor. Bakınız:Animasyon İle İlgili Özellikler.
Sürüm: CSS3
JavaScript Dilbilgisi: object.style.scrollMarginBlockStart="20px"

Tarayıcı Desteği

Tabloda bulunan 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-snap-align özelliği

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

Referans:CSS writing-mode özelliği