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

Tanım ve Kullanım

scroll-margin-block-end Bu özellik, blok yönünde hiza konumu ile konteyner arasındaki mesafeyi belirtir.

Bu, kaydırma durdurduğunuzda, kaydırmanın hızla ayarlanması ve blok yönünde alt öğelerin sonundaki çekme konumu ile konteyner arasındaki belirtilen mesafede durması anlamına gelir.

Blok yönü, mevcut satırın göre konumlandırılan, bir sonraki satırın yerleştirileceği yön anlamına gelir. Bu, CSS display: block; özelliğine sahip etiketlerin (örneğin <p> ve <div> etiketleri) sayfada nasıl yerleştirileceğini gösterir. Blok yönü yazı diliye bağlıdır; örneğin, Moğolca'da yeni satırlar soldan sağa dizilir, bu yüzden blok yönü de sağdan sola doğru olurken, İngilizce sayfaların blok yönü aşağıya doğru olur. Blok yönü, CSS özelliği aracılığıyla belirlenir. writing-mode gelir.

tanımlanır.

Yaklaştırma konumu, kaydırmayı durdurduğunuzda, çocuğun konteyner içinde yaklaştırıldığı konum demektir.Uyarı: scroll-snap-align Bu özellik sadece blok yönünde

Özellik 'end' olarak ayarlandığında yalnızca etkilidir. scroll-margin-block-end özellik etkilerini görmek için, çocuğu elemanında ayarlanmalıdır scroll-margin-block-end ve scroll-snap-align özellik, ebeveyn elemanında scroll-snap-type özellikleri ile benzerdir.

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ünde, hiza konumunu konteynerle arasındaki kaydırma dış kenar marjını 20px olarak ayarlar:

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

Kendiniz Deneyin

Örnek 2

<div> elemanının writing-mode Özellik değeri vertical-rl olarak ayarlandığında, blok yönü sağdan sola doğru olur. Sonuç olarak, elemanın ucu alttan sola doğru hareket eder:

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

Kendiniz Deneyin

CSS Dilbilgisi

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

Özellik Değeri

Değer Açıklama
0 Varsayılan. Elemanın varsayılan scroll-margin-block-end mesafesi.
length

px, pt, cm gibi birimlerle belirlenen mesafeleri belirtir. 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 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.scrollMarginBlockEnd="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 scroll-snap-align özelliği

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

Referans:CSS writing-mode özelliği