Yenilemek için çekme ve taşma efektlerini özelleştirerek kaydırmanızın kontrolünü elinize alın

Özet

CSS overscroll-behavior özelliği, geliştiricilerin içeriğin üstüne/altına ulaşıldığında tarayıcının varsayılan taşma kaydırma davranışını geçersiz kılmasına olanak tanır. Kullanım alanları arasında mobil cihazlarda yenilemek için kaydırma özelliğini devre dışı bırakma, kaydırma sonu parlaması ve lastik bant efektlerini kaldırma ve sayfa içeriğinin bir kalıcı öğe/yer paylaşımı altındayken kaydırılmasını önleme yer alır.

Arka plan

Kaydırma sınırları ve kaydırma zinciri

Android için Chrome'da kaydırma zinciri.

Kaydırma, bir sayfayla etkileşim kurmanın en temel yollarından biridir ancak tarayıcının tuhaf varsayılan davranışları nedeniyle belirli kullanıcı deneyimi kalıplarıyla başa çıkmak zor olabilir. Örneğin, kullanıcının kaydırması gereken çok sayıda öğe içeren bir uygulama çekmecesini ele alalım. Kullanıcılar sayfanın sonuna ulaştığında, taşma kapsayıcısı kaydırmayı durdurur çünkü tüketilecek başka içerik yoktur. Başka bir deyişle kullanıcı, "kaydırma sınırına" ulaşır. Ancak kullanıcı kaydırmaya devam ederse ne olacağına dikkat edin. Çekmecenin arkasındaki içerik kaydırılmaya başlar. Kaydırma işlemi, üst kapsayıcı tarafından devralınır. Örnekte bu, ana sayfanın kendisidir.

Bu davranışın adı kaydırma zincirleme olarak adlandırılır. Tarayıcının içerik kaydırırken varsayılan davranışı budur. Varsayılan ayar genellikle iyidir ancak bazen istenmeyen veya beklenmedik sonuçlar verebilir. Bazı uygulamalar, kullanıcı kaydırma sınırına ulaştığında farklı bir kullanıcı deneyimi sunmak isteyebilir.

Yenilemek için kaydırma efekti

Yenilemek için kaydırma, Facebook ve Twitter gibi mobil uygulamalar tarafından popüler hale getirilen sezgisel bir harekettir. Sosyal medya feed'ini aşağı çekip bıraktığınızda daha yeni gönderilerin yüklenmesi için yeni bir alan oluşturulur. Hatta bu kullanıcı deneyimi o kadar popüler oldu ki Android'deki Chrome gibi mobil tarayıcılar da aynı efekti kullanmaya başladı. Sayfanın üst kısmında aşağı kaydırıldığında sayfanın tamamı yenilenir:

Twitter'ın PWA'sında feed yenilenirken kullanılan özel yenilemek için kaydırma
özelliği.
Chrome Android'in yerel yenilemek için kaydırma işlemi
tüm sayfayı yeniler.

Twitter PWA gibi durumlarda, yerel yenilemek için kaydırma işlemini devre dışı bırakmak mantıklı olabilir. Neden? Bu uygulamada, kullanıcının sayfayı yanlışlıkla yenilemesini istemezsiniz. Ayrıca, yenileme animasyonunu iki kez görebilirsiniz. Alternatif olarak, tarayıcının işlemini özelleştirerek sitenin markasıyla daha uyumlu hale getirmek daha iyi olabilir. Ancak bu tür bir özelleştirme yapmak zor olabiliyor. Geliştiriciler gereksiz JavaScript yazmak, pasif olmayan dokunma dinleyicileri (kaydırmayı engelleyen) eklemek veya sayfanın taşmasını önlemek için tüm sayfayı 100vw/vh <div> içine yerleştirmek zorunda kalıyor. Bu geçici çözümlerin kaydırma performansı üzerinde olumsuz etkileri olduğu iyi bilinmektedir.

Daha iyisini yapabiliriz.

overscroll-behavior ile tanışın

overscroll-behavior özelliği, bir kapsayıcıyı (sayfanın kendisi dahil) fazla kaydırdığınızda ne olacağını kontrol eden yeni bir CSS özelliğidir. Bu özelliği, kaydırma zincirini iptal etmek, yenilemek için kaydırma işlemini devre dışı bırakmak/özelleştirmek, iOS'te lastik bant efektlerini devre dışı bırakmak (Safari overscroll-behavior uyguladığında) ve daha fazlası için kullanabilirsiniz. En iyi yanı ise overscroll-behavior kullanmanın, girişte bahsedilen hileler gibi sayfa performansını olumsuz etkilememesidir.

Özellik üç olası değer alır:

  1. auto: Varsayılan. Öğede başlayan kaydırma işlemleri, üst öğelere yayılabilir.
  2. contain: Kaydırma zincirlemesini önler. Kaydırma işlemleri üst öğelere yayılmaz ancak düğüm içindeki yerel efektler gösterilir. Örneğin, Android'de kaydırma sınırına ulaşıldığında kullanıcıyı bilgilendiren kaydırma sınırı aşımı parlama efekti veya iOS'te lastik bant efekti. Not: html öğesinde overscroll-behavior: contain kullanılması, kaydırma sınırını aşma gezinme işlemlerini engeller.
  3. none: contain ile aynıdır ancak düğümün kendisinde kaydırma sonu efektlerini de (ör. Android kaydırma sonu parlaması veya iOS lastik bantlama) engeller.

overscroll-behavior özelliğinin nasıl kullanılacağını görmek için birkaç örneğe göz atalım.

Kaydırma işlemlerinin sabit konumlu bir öğeden çıkmasını önleme

Sohbet kutusu senaryosu

Sohbet penceresinin altındaki içerik de kaydırılıyor :(

Sayfanın alt kısmında sabit konumlu bir sohbet kutusu olduğunu düşünün. Sohbet kutusunun bağımsız bir bileşen olması ve arkasındaki içerikten ayrı olarak kaydırılması amaçlanmıştır. Ancak kaydırma zinciri nedeniyle, kullanıcı sohbet geçmişindeki son mesaja ulaştığında doküman kaydırılmaya başlar.

Bu uygulama için, sohbet kutusunda başlayan kaydırma işlemlerinin sohbet içinde kalması daha uygundur. Sohbet mesajlarını içeren öğeye overscroll-behavior: contain ekleyerek bunu yapabiliriz:

#chat .msgs {
  overflow: auto;
  overscroll-behavior: contain;
  height: 300px;
}

Temel olarak, sohbet kutusunun kaydırma bağlamı ile ana sayfa arasında mantıksal bir ayrım oluşturuyoruz. Sonuç olarak, kullanıcı sohbet geçmişinin en üstüne/en altına ulaştığında ana sayfa yerinde kalır. Sohbet kutusunda başlayan kaydırma işlemleri dışarıya yayılmaz.

Sayfa yer paylaşımı senaryosu

"Alttan kaydırma" senaryosunun başka bir varyasyonu, içeriğin sabit konumlu bir yer paylaşımının arkasında kaydırıldığını gördüğünüz durumdur. Bir hediye overscroll-behavior verme zamanı geldi. Tarayıcı yardımcı olmaya çalışıyor ancak sonuçta sitenin hatalı görünmesine neden oluyor.

Örnek: overscroll-behavior: contain olan ve olmayan kalıcı pencere:

Önce: Sayfa içeriği, yer paylaşımının altında kaydırılır.
Sonra: Sayfa içeriği, yer paylaşımının altında kaydırılmaz.

Yenilemek için kaydırma özelliğini devre dışı bırakma

Yenilemek için kaydırma işlemini devre dışı bırakmak tek bir CSS satırından ibarettir. Görüntü alanını tanımlayan öğenin tamamında kaydırma zincirini engellemeniz yeterlidir. Çoğu durumda bu, <html> veya <body> şeklindedir:

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}

Bu basit eklemeyle, chatbox demosundaki çift yenilemek için kaydırma animasyonlarını düzeltir ve bunun yerine daha düzenli bir yükleme animasyonu kullanan özel bir efekt uygulayabiliriz. Gelen kutusu yenilenirken gelen kutusunun tamamı da bulanıklaşır:

Önce
Sonra

Tam kodun bir snippet'ini aşağıda bulabilirsiniz:

<style>
  body.refreshing #inbox {
    filter: blur(1px);
    touch-action: none; /* prevent scrolling */
  }
  body.refreshing .refresher {
    transform: translate3d(0,150%,0) scale(1);
    z-index: 1;
  }
  .refresher {
    --refresh-width: 55px;
    pointer-events: none;
    width: var(--refresh-width);
    height: var(--refresh-width);
    border-radius: 50%;
    position: absolute;
    transition: all 300ms cubic-bezier(0,0,0.2,1);
    will-change: transform, opacity;
    ...
  }
</style>

<div class="refresher">
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
</div>

<section id="inbox"><!-- msgs --></section>

<script>
  let _startY;
  const inbox = document.querySelector('#inbox');

  inbox.addEventListener('touchstart', e => {
    _startY = e.touches[0].pageY;
  }, {passive: true});

  inbox.addEventListener('touchmove', e => {
    const y = e.touches[0].pageY;
    // Activate custom pull-to-refresh effects when at the top of the container
    // and user is scrolling up.
    if (document.scrollingElement.scrollTop === 0 && y > _startY &&
        !document.body.classList.contains('refreshing')) {
      // refresh inbox.
    }
  }, {passive: true});
</script>

Kaydırma sonu parlaması ve lastik bant efektlerini devre dışı bırakma

Kaydırma sınırına ulaşıldığında sıçrama efektini devre dışı bırakmak için overscroll-behavior-y: none kullanın:

body {
  /* Disables pull-to-refresh and overscroll glow effect.
     Still keeps swipe navigations. */
  overscroll-behavior-y: none;
}
Önce: Kaydırma sınırına ulaşıldığında bir parlama gösterilir.
Sonra: Parlama devre dışı bırakıldı.

Tam demo

Tüm bunları bir araya getiren tam sohbet kutusu demosu, özel bir yenilemek için kaydırma animasyonu oluşturmak ve kaydırma işlemlerinin sohbet kutusu widget'ından çıkmasını engellemek için overscroll-behavior kullanır. Bu sayede, CSS overscroll-behavior olmadan elde edilmesi zor olan ideal bir kullanıcı deneyimi sunulur.

Demoyu görüntüle | Kaynak