Kalıcı İletişim Kutusunun Altındaki Sayfanın Kaydırılmasını Engelleme

Bir <dialog> öğesi, showModal() kullanılarak kalıcı olarak açıldığında tarayıcı, öğeyi en üst katmana taşır ve belgenin geri kalanını etkin değil olarak işaretler. Bu, alttaki sayfada işaretçi tıklamalarını ve klavye odağını engellese de kaydırmayı engellemez:

1. İşaretçi veya dokunma hareketi ::backdrop üzerindeyken kaydırma yapıldığında alttaki sayfa kaydırılır.
2. İletişim kutusu kaydırma sınırına ulaştığında veya iletişim kutusunun içeriği taşmıyorsa hemen <dialog> içinde kaydırma işlemi, temel sayfaya zincirlenir.

CSS Overscroll Behavior spesifikasyonuna göre overscroll-behavior, kaydırılamayan kaydırma kapsayıcıları (overflow: hidden veya içeriği şu anda taşmayan overflow: auto içeren öğeler) dahil olmak üzere tüm kaydırma kapsayıcısı öğeleri için geçerlidir. <dialog> üzerinde overscroll-behavior: contain ile overflow: hidden ve dialog::backdrop üzerinde overscroll-behavior: contain özelliklerini birleştirerek, yalnızca CSS kullanarak alttaki sayfanın kaydırılmasını önleyebilirsiniz.

Uygulama

1. <dialog> öğesinde kaydırma zincirini kontrol altına alın

Kullanıcı aracısı stil sayfası, <dialog> üzerinde overflow: auto değerini ayarlayarak varsayılan olarak kaydırma kapsayıcısı haline getirir. dialog:modal (veya dialog) için overscroll-behavior: contain (veya none) uygulayın.

2. ::backdrop öğesini kaydırma kapsayıcısına dönüştürün ve kaydırma işlemini kapsayın

Varsayılan olarak dialog::backdrop, overflow: visible değerine sahiptir. Bu, kaydırma kapsayıcısı olmadığı ve overscroll-behavior değerini yoksaydığı anlamına gelir. dialog::backdrop üzerinde overflow: hidden özelliğini ayarlayarak kaydırılamayan bir kaydırma kapsayıcısı oluşturmanız ve bunu overscroll-behavior: contain ile eşlemeniz gerekir. Böylece, arka plan üzerinde gerçekleştirilen kaydırma hareketleri yakalanır ve alttaki belgeye ulaşmaz.

Örnek Kod

dialog:modal {
  /* MANDATORY: Prevent scroll gestures inside the modal (even when its content
     does not overflow) from chaining to the underlying page. */
  overscroll-behavior: contain;
}

dialog::backdrop {
  /* MANDATORY: ::backdrop defaults to overflow: visible (not a scroll container).
     Set overflow: hidden so it becomes a non-scrollable scroll container that
     honors overscroll-behavior. */
  overflow: hidden;
  overscroll-behavior: contain;
}

En İyi Uygulamalar ve Kısıtlamalar

• ZORUNLU: <dialog> öğesinin kendisinde (dialog:modal seçiciyi kullanarak) ve dialog::backdrop öğesinde overscroll-behavior: contain değerini ayarlayın. Bu beyan olmadan, arka plan veya iletişim kutusu içindeki kaydırma hareketleri sayfaya zincirlenmeye devam eder.
• ZORUNLU: dialog::backdrop üzerinde overflow: hidden (veya overflow: auto) değerini ayarlayarak kaydırma kapsayıcısı haline getirin. Bu beyan olmadan ::backdrop varsayılan olarak overflow: visible değerine ayarlanır ve overscroll-behavior etkili olmaz.
• dialog::backdrop veya dialog üzerinde overflow: clip ya da overflow: visible KULLANMAYIN. İki değer de kaydırma kapsayıcısı oluşturmadığından overscroll-behavior uygulanmaz.
• Bir iletişim kutusu açıldığında arka plan kaydırmayı kilitlemek için <html> veya <body> öğesine overflow: hidden ya da position: fixed UYGULAMAYIN. Kök taşmasını değiştirmek, sayfa kaydırma çubuğunu kaldırır (yatay düzen kaymasına neden olur), sayfa kaydırma konumunu sıfırlayabilir veya atlayabilir ve temel sayfadaki position: sticky öğelerini bozabilir.

Yedek Stratejiler

overscroll-behavior CSS özelliği, taşan içeriğe sahip kaydırma kapsayıcıları için tüm önemli tarayıcılarda desteklenir. Ancak kaydırılamayan kaydırma kapsayıcılarında overscroll-behavior özelliğine uymak, özellik algılaması yapılamayan daha yeni bir spesifikasyondur.

@supports (overscroll-behavior: contain) veya CSS.supports('overscroll-behavior', 'contain') ile kaydırılamayan kapsayıcı desteğini özellik algılamaya ÇALIŞMAYIN. Tüm modern tarayıcılar, overscroll-behavior: contain özellik söz dizimini destekler ve yalnızca içerik taştığında zorunlu kılsalar bile true değerini döndürür.

Bunun yerine, kaydırılamayan kaydırma kapsayıcılarında kaydırma kapsayıcısını progresif geliştirme olarak değerlendirin:

• Kaydırılamayan kaydırma kapsayıcılarında overscroll-behavior özelliğini destekleyen tarayıcılarda, arka plan sayfasının kaydırılması hem dialog::backdrop üzerinde hem de <dialog> içinde (içeriğinin taşmasından bağımsız olarak) tamamen engellenir.
• Kaydırılamayan kaydırma kapsayıcılarında overscroll-behavior özelliğini henüz desteklemeyen tarayıcılarda, dialog öğesindeki overscroll-behavior: contain, iletişim kutusunun kendi içeriği taştığında ve kaydırılabilir olduğunda kaydırma zincirini engellemeye devam eder. Bu sırada showModal(), klavye odağını yakalamaya ve arka plan dokümanını inert olarak işaretlemeye devam eder.
• <html> veya <body> öğesine overflow: hidden ya da position: fixed uygulayan eski geçici çözümler yerine progresif geliştirmeden yararlanmanız önerilir. Bu yöntem, kök kaydırma çubuğunu kaldırmaz, yatay düzen kaymalarına neden olmaz, sayfa kaydırma konumunu atlamaz veya temel sayfadaki position: sticky öğelerini bozmaz.