CSS overscroll-behavior özelliği

Tanım ve kullanım

overscroll-behavior Özellik, bir elemanın aşırı kaydırma sınırlarını aşmaya çalışırken kaydırma zincirini (scroll chaining) veya aşırı kaydırma geri bildirimini (overscroll affordance) kapatmak için kullanılır.

Kaydırma zinciri: Bir elemende aşırı kaydırma yapıldığında, ebeveyn elemanın kaydırma davranışını etkiler. Bu, varsayılan davranıştır.

Aşırı kaydırma geri bildirimi: Kaydırma sınırlarını aşmaya çalışırken kullanıcıya sağlanan geri bildirim. Örneğin, sayfa üstüne kaydırmaya çalışırken mobil cihazlarda genellikle görsel geri bildirim gösterilir ve sayfa yenilenir.

overscroll-behavior Bu özellik, aşağıdaki özelliklerin kısaltma formudur:

overscroll-behavior Özelliğin değeri farklı yollarla ayarlanabilir:

overscroll-behavior özelliği iki değer içeriyorsa:

overscroll-behavior: none contain;
  • x yönlü: Aşırı kaydırma davranışı yok
  • y yönlü: Kaydırma zinciri yok, ancak aşırı kaydırma geri bildirimi izin verilir

overscroll-behavior özelliği bir değer içeriyorsa:

overscroll-behavior: contain;
  • x ve y yönlü: Kaydırma zinciri yok, ancak aşırı kaydırma geri bildirimi izin verilir

Örnek

Örnek 1

Kaydırılabilir <div> elemanının kaydırma zincirini kapatın:

#yellowDiv {
  overscroll-behavior: contain;
}

Kişisel olarak deneyin

Örnek 2: Çift değer dilgisi:

Aşağıdaki gibi: overscroll-behavior Özellik Değeri ayarlanmıştır auto nonex yönlü kaydırma zinciri ve aşırı kaydırma geri bildirimi izin verilir, ancak y yönlü izin verilmez:

#pinkDiv {
  overscroll-behavior: auto none;
}

Kişisel olarak deneyin

CSS Dilbilgisi

overscroll-behavior: auto|contain|none|initial|inherit;

Özellik Değeri

Değer Açıklama
auto Kaydırma zinciri ve aşırı kaydırma geri bildirimi davranışına izin verilir. Varsayılan değer.
contain Aşırı kaydırma geri bildirimi davranışına izin verilir, ancak kaydırma zinciri izin verilmez.
none Aşırı kaydırma geri bildirimi veya kaydırma zinciri davranışına izin verilmez.
initial Bu özelliği varsayılan değerine ayarlar. Ayrıca bakınız: initial.
inherit Bu özelliği ebeveyn elemanından devralır. Ayrıca bakınız: inherit.

Teknik Ayrıntılar

Varsayılan Değer: auto
Devralabilirlik: Hayır
Animasyon Yapımı: Desteklenmiyor. Ayrıca bakınız:Animasyon İle İlgili Özellikler.
Sürüm: CSS3
JavaScript Dilbilgisi: object.style.overscrollBehavior="none"

Tarayıcı Desteği

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

Chrome Edge Firefox Safari Opera
63.0 18.0 * 59.0 16.0 50.0

* Microsoft Edge'te, 'none' özelliği 'contain' olarak işlenir, bu yanlıştır.

İlgili sayfalar

Referans:CSS overscroll-behavior-x özelliği

Referans:CSS overscroll-behavior-y özelliği

Referans:CSS scroll-behavior özelliği

Referans:CSS scroll-margin özelliği

Referans:CSS scroll-padding özelliği

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