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/alt kısmına erişirken 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 cihazda yenilemek için çekme özelliğinin devre dışı bırakılması, fazla kaydırma parlamasını ve lastik şerit efektlerinin kaldırılması, kalıcı öğe/yer paylaşımı altında sayfa içeriğinin kaydırılmasının önlenmesi yer alır.

Arka plan

Kaydırma sınırları ve 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 bazı kullanıcı deneyimi kalıplarıyla başa çıkmak zor olabilir. Örneğin, kullanıcının kaydırması gerekebilecek çok sayıda öğenin bulunduğu bir uygulama çekmecesini ele alalım. Alta ulaştıklarında, tüketilecek başka içerik kalmadığı için taşma kapsayıcısı kaydırmayı durdurur. Başka bir deyişle, kullanıcı bir "kaydırma sınırına" ulaşır. Ancak kullanıcı sayfayı kaydırmaya devam etmeye devam ederse ne olacağına dikkat edin. Çekmecenin arkasındaki içerik kaymaya başlar. Kaydırma, üst kapsayıcı tarafından (örnekte ana sayfanın kendisi) aktarılır.

Bu davranışa kaydırma zinciri adı verilir. Bu, tarayıcının içerik kaydırırken kullandığı varsayılan davranıştır. Varsayılan ayar çoğu zaman oldukça iyidir ama bu, istenen, hatta beklenmedik bir durum olmayabilir. Bazı uygulamalar, kullanıcı kaydırma sınırına ulaştığında farklı bir kullanıcı deneyimi sunmak isteyebilir.

Yenilemek için çekme efekti

Yenilemek için çekme, Facebook ve Twitter gibi mobil uygulamalar tarafından popüler hale gelen sezgisel bir harekettir. Bir sosyal medya feed'ini aşağı çekmek ve yayınlamak, yeni gönderilerin yüklenmesi için yeni bir alan oluşturur. Hatta bu özel kullanıcı deneyimi o kadar popüler oldu ki Android'deki Chrome gibi mobil tarayıcılar da aynı etkiyi yarattı. Sayfanın üst kısmından aşağı doğru kaydırdığınızda tüm sayfa yenilenir:

Twitter PWA gibi durumlarda yerel yenilemek için çekme işlemini devre dışı bırakmak mantıklı olabilir. Bunun sebebi nedir? Bu uygulamada, muhtemelen kullanıcının sayfayı yanlışlıkla yenilemesini istemezsiniz. Ayrıca, çift yenileme animasyonu görme potansiyeli de vardır. Alternatif olarak, tarayıcının işlemini özelleştirerek sitenin markasına daha uygun bir hale getirmek daha iyi olabilir. Ne yazık ki bu tür özelleştirmeler zorlayıcıydı. Geliştiriciler sonuçta gereksiz JavaScript yazar, pasif olmayan dokunma dinleyiciler ekler (kaydırmayı engeller) veya sayfanın tamamını 100vw/vh <div> içine alırlar (sayfanın taşmasını önlemek için). Bu geçici çözümlerin, kaydırma performansı üzerindeki iyi belgelenmiş olumsuz etkileri vardır.

Daha iyisini yapabiliriz.

overscroll-behavior ile tanışın

overscroll-behavior özelliği, bir kapsayıcıyı (sayfanın kendisi de dahil) fazla kaydırdığınızda gerçekleşeceklerin davranışını kontrol eden yeni bir CSS özelliğidir. Kaydırma zincirini iptal etmek, yenilemek için çekme işlemini devre dışı bırakmak/özelleştirmek, iOS'te lastik bant oluşturma efektlerini devre dışı bırakmak (Safari overscroll-behavior özelliğini uyguladığında) ve daha fazlasını yapmak için bu komutu kullanabilirsiniz. En iyi yanı da, girişte bahsedilen saldırılar gibi overscroll-behavior kullanımının sayfa performansını olumsuz şekilde etkilememesidir.

Bu özellik üç olası değer alır:

1. auto - Varsayılan. Öğede gerçekleşen kaydırmalar, üst öğelere yayılabilir.
2. contain: Kaydırma zincirini önler. Kaydırmalar üst öğelere yayılmaz, ancak düğüm içindeki yerel efektler gösterilir. Örneğin, Android'de kaydırma parlama etkisi veya iOS'ta kaydırma sınırına ulaştığında kullanıcıyı bilgilendiren lastik bantlama efekti. Not: html öğesinde overscroll-behavior: contain kullanılması, fazla kaydırma yaparak gezinme işlemlerini önler.
3. none: contain ile aynıdır ancak düğümün kendi içinde fazla kaydırma efektlerini de önler (ör. Android fazla kaydırma parlaması veya iOS kauçuk bant).

overscroll-behavior kullanımını görmek için birkaç örneği inceleyelim.

Kaydırmaların sabit konumlu bir öğeden çıkmasını engelle

Sohbet kutusu senaryosu

Sayfanın alt kısmında bulunan sabit yerleştirilmiş bir sohbet kutusu düşünün. Bunun nedeni, sohbet kutusunun bağımsız bir bileşen olması ve arkasındaki içerikten ayrı olarak kaydırılmasıdır. Ancak kaydırma zinciri nedeniyle kullanıcı sohbet geçmişindeki son mesaja ulaşır ulaşmaz doküman kaydırmaya başlar.

Bu uygulama için, sohbet kutusu içinde gerçekleşen kaydırmaların sohbet içinde kalması daha uygundur. Bunu, sohbet mesajlarını içeren öğeye overscroll-behavior: contain ekleyerek sağlayabiliriz:

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

Esas olarak, sohbet kutusunun kaydırma bağlamı ile ana sayfa arasında mantıksal bir ayırma oluştururuz. Sonuç olarak kullanıcı sohbet geçmişinin en üstüne/altına ulaştığında ana sayfa konumda kalır. Sohbet kutusunda başlayan kaydırmalar yayılmaz.

Sayfa yerleşimi senaryosu

"Alt kaydırma" senaryosunun başka bir varyasyonu da içeriğin sabit konum yer paylaşımının arkasında kaydırıldığını görmenizdir. Sona ermiş bir hediye overscroll-behavior var. Tarayıcı yardımcı olmaya çalışıyor, ancak sonuçta siteyi hatalı gösteriyor.

Örnek - overscroll-behavior: contain içeren ve içermeyen kalıcı:

Yenilemek için çekme seçeneğini devre dışı bırakma

Yenilemek için çekme işlemini kapatmak CSS'ye ait tek bir satırdır. Bunun için, görüntü alanını tanımlayan öğenin tamamında kaydırma zincirini önlemeniz 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, sohbet kutusu demosundaki yenilemek için çift çekme animasyonlarını düzeltiriz ve bunun yerine daha düzgün bir yükleme animasyonu kullanan özel bir efekt uygulayabiliriz. Gelen kutusu yenilenirken gelen kutusunun tamamı da bulanıklaştırılır:

Tam kodun bir snippet'ini burada görebilirsiniz:

<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>

Fazla kaydırma parlaması ve lastik bantlama efektleri devre dışı bırakılıyor

Kaydırma sınırına ulaştığınızda geri sekme efektini devre dışı bırakmak için overscroll-behavior-y: none komutunu kullanın:

body {
  /* Disables pull-to-refresh and overscroll glow effect.
     Still keeps swipe navigations. */
  overscroll-behavior-y: none;
}

Demonun tamamı

Her şeyi bir araya getiren tam sohbet kutusu demosunda, özel bir yenilemek için çekme animasyonu oluşturmak ve kaydırmaların sohbet kutusu widget'ından çıkmasını devre dışı bırakmak için overscroll-behavior kullanılır. Bu, CSS overscroll-behavior olmadan ulaşmak zor olabilecek optimum kullanıcı deneyimini sağlar.