CSS scroll-margin-bottom özelliği

Tanım ve Kullanım

scroll-margin-bottom Özellik, çekme konumu ile konteyner arasındaki mesafeyi belirtir.

Yapışma konumu, durdurulduğunda kaydırılan alt elementin konteyner içinde yapıştığı konumdur.

Yapışma konumu, scroll-snap-align Yapışma konumu, Özelliği ayarlandı, ancak CSS özelliklerinin de etkisi olabilir. ve writing-mode Etkisini

Dikkat:Bu özellik, alt elementin altına yapışma konumu ayarlandığında yalnızca geçerlidir.

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

Örnek

Örnek 1

Yapışma konumunu konteynerle araya 20px'lik alt kaydırma dış kenar boşluğu olarak ayarlamak için:

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

Kişisel Olarak Deneyin

Örnek 2: Resim Kütüphanesi

scroll-margin-bottom Bu özellik, yapışma davranışı olan resim galerilerinde kullanılabilir. Bu örnekte:scroll-margin-bottom Kullanıcıya, altta bir resmin daha olduğunu bildirmek için. İlk resmi kaydırarak etkisini görmek için biraz ileri gidin:

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

Kişisel Olarak Deneyin

Örnek 3: Yapışma Konumu

Yapışma konumunu ayarlamak için scroll-margin-bottom Özelliği etkin hale gelir, yapışma konumu alt elementin altına ayarlanmalıdır. Bu örnekte:writing-mode Özelliği, alt elementin altına yapışma konumunu sola değiştirir. Bu tür kodları kullanırken:scroll-margin-bottom Artık geçerli olmayacak özellikler:

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

Kişisel Olarak Deneyin

CSS Dilbilgisi

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

Özellik Değeri

Değer Açıklama
0 Alt kaydırma dış kenar boşluğu sıfırdır. Bu varsayılan değerdir.
length

px, pt, cm gibi birimlerle belirlenen kaydırma alt dış kenar boşluğu. 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 elementinden miras alır. Bakınız inherit.

Teknik Ayrıntılar

Varsayılan Değer: none
Mirasçılık: Hayır
Animasyon Yapımı: Desteklenmiyor. Bakınız:Animasyon İle İlgili Özellikler.
Sürüm: CSS3
JavaScript Dilbilgisi: object.style.scrollMarginBottom="20px"

Tarayıcı Desteği

Tabloda sayılar, 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