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 üst/alt kısmına ulaştığında tarayıcının varsayılan taşma kaydırma davranışı içerik. Kullanım alanları arasında, yenilemek için çekme işlevini devre dışı bırakmak yer alır. mobil cihazlarda kaydırma efektlerini, ve sayfa içeriğinin bir kalıcı/yer paylaşımı altındayken kaymasının önlenmesi.

Arka plan

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

Chrome Android'de kaydırma zinciri.

Kaydırma, bir sayfayla etkileşimde bulunmanın en temel yollarından biridir, ancak Tarayıcının alışılmadık yapısı nedeniyle bazı kullanıcı deneyimi kalıplarıyla başa çıkması zor olabilir. varsayılan davranışlar. Örneğin, yüksek miktarda fotoğraf içeren bir uygulama çekmecesi öğeler arasından seçim yapabilirsiniz. En alta ulaştıklarında, taşma kapsayıcısı, tüketilecek başka içerik kalmadığı için kaydırmayı durdurur. Başka bir deyişle kullanıcı "kaydırma sınırına" ulaştığından emin olun. Ancak kullanıcı bu reklamları görmeye devam ederse ne olduğuna kaydırabilirsiniz. Çekmecenin arkasındaki içerik kaymaya başlar. Kaydırma (şimdiki değeri) üst kapsayıcı tarafından ele geçirildiğinden; ana sayfanın kendisi gösterilir.

Bu davranışa kaydırma zinciri adı verilir; tarayıcının varsayılanı gösteren bir e-posta alırsınız. Varsayılan ayar çoğu zaman oldukça iyidir ancak bazen istenen, hatta beklenmedik durumlarla karşılaşılabilir. Bazı uygulamalar Kullanıcı kaydırma sınırına ulaştığında farklı bir kullanıcı deneyimi sağlar.

Yenilemek için çekme efekti

Yenilemek için çekme, aşağıdakiler gibi mobil uygulamalar tarafından popüler hale gelen sezgisel bir harekettir: Facebook ve Twitter. Bir sosyal medya feed'ini aşağı çekip yayınlamak, yeni Daha yeni yayınların yüklenmesi için yer açın. Aslında bu kullanıcı deneyimi o kadar popüler hale geldi ki Android üzerinde Chrome gibi mobil tarayıcılar aynı etkiyi yaratır. Sayfanın üst kısmından aşağı doğru kaydırdığınızda tüm sayfa yenilenir:

Twitter'ın özel yenilemek için
bir feed'i yenilerken yardımcı oluyor.
Chrome Android'in yerel yenilemek için çekme işlemi
sayfasını ziyaret edin.

Twitter PWA gibi durumlarda yerel yenilemek için çekme işlemini devre dışı bırakmak mantıklı olabilir. Neden? Burada uygulamada, muhtemelen kullanıcının sayfayı yanlışlıkla yenilemesini istemezsiniz. Evet, bir çift yenileme animasyonu görebilirsiniz. Alternatif olarak sitenizin işlevselliğine daha yakın bir şekilde hizalayarak, daha uygun bir marka bilinci oluşturma. Ne yazık ki bu tür özelleştirmeler, özellikle de zor olabilir. Geliştiriciler gereksiz JavaScript'ler yazar, pasif değil dinleyicilere dokunun (kaydırmayı engeller) veya sayfanın tamamını 100 vw/vh olarak tutun <div> (sayfanın taşmasını önlemek için). Bu çözümler, iyi belgelenmiş olumsuz arasındaki farkları inceledik.

Daha iyisini yapabiliriz.

overscroll-behavior ile tanışın

overscroll-behavior özelliği, aşağıdakileri kontrol eden yeni bir CSS özelliğidir: bir kapsayıcıyı fazla kaydırdığınızda olanların davranışını ( yapabilirsiniz. Kaydırma zincirini iptal etmek, görünümü devre dışı bırakmak/özelleştirmek için yenileme için çekme işlemi, iOS'te lastik bant oluşturma efektlerini devre dışı bırakın (Safari overscroll-behavior) ve daha fazlasını uygular. En iyi yanı da, overscroll-behavior kullanımının olumsuz yönde etkilenmemesidir. özellikle de girişte bahsedilen hileler gibi sayfa performansına bakın.

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

  1. auto - Varsayılan. Öğede bulunan kaydırmalar üst öğeler olarak tanımlanır.
  2. contain: Kaydırma zincirini önler. Kaydırmalar üst öğelere yayılmaz ancak düğüm içindeki yerel efektler gösterilir. Örneğin, fazla kaydırma yapıldığından veya iOS'teki lastik bantlanma etkisine bağlı olarak kullanıcının bilgilendirilmesi olduğunu varsayalım. Not: html öğesi üzerindeki overscroll-behavior: contain, fazla kaydırmayı önler gezinme eylemleriyle ilgilidir.
  3. none: contain ile aynıdır ancak düğümün kendisi (ör. Android fazla kaydırma parlaması veya iOS kauçuk kısmı).
ziyaret edin.

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

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

Sohbet kutusu senaryosu

Sohbet penceresinin altındaki içerikler de kayıyor :(

Sayfanın alt kısmında bulunan sabit yerleştirilmiş bir sohbet kutusu düşünün. İlgili içeriği oluşturmak için kullanılan Chatbox'ın bağımsız bir bileşen olması ve sayfada aşağı doğru içeriklerinden farklıdır. Ancak, kaydırma zinciri nedeniyle Kullanıcı sohbetteki son mesaja ulaştığında doküman kaydırmaya başlıyor geçmişi'ne dokunun.

Bu uygulama için, sohbetin içinde kalması sağlanır. Bunu, açılış sayfasına Sohbet mesajlarını içeren öğeye overscroll-behavior: contain:

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

Esas olarak, sohbet kutusundaki kaydırmayla ile ana sayfaya bakın. Bunun sonucunda, ana sayfa Kullanıcı sohbet geçmişinin en üstüne/en altına ulaşır. sohbet kutusu dağıtılmaz.

Sayfa yerleşimi senaryosu

"Alt kaydırma" işlevinin başka bir varyasyonu gördüğünüz gibi içeriğin sabit konum yer paylaşımının arkasına kaydırılabilir. Ölümcül bir hediye overscroll-behavior hazır. Tarayıcı yardımcı olmaya çalışıyor, ancak sonuçta sitenin hatalı görünmesine neden olur.

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

Ö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 çekme seçeneğini devre dışı bırakma

Yenilemek için çekme işlemini kapatmak CSS'ye ait tek bir satırdır. Sadece görüntü alanını tanımlayan öğenin tamamında kaydırma zincirlemesi yer alır. Çoğu durumda bu, <html> veya <body>:

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

Bu basit eklemeyle, yenileme için çift çekme animasyonlarını sohbet kutusu demosunu bunun yerine daha düzgün bir yükleme animasyonu kullanan özel bir efekt uygulayın. İlgili içeriği oluşturmak için kullanılan Gelen kutusu yenilenirken gelen kutusunun tamamı da bulanıklaştırılır:

Önce
Sonra

Burada tam kod:

<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 dokunulduğunda geri sekme efektini devre dışı bırakmak için overscroll-behavior-y: none:

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

Demonun tamamı

Bir araya getirildiğinde, chatbox demo şunu kullanır: Özel bir yenilemek için çekme animasyonu oluşturmak için overscroll-behavior ve kaydırmaların sohbet kutusu widget'ından çıkmasını engeller. Bu sayede, CSS olmadan ulaşmak zor olan bir kullanıcı deneyimi overscroll-behavior

Demoyu görüntüleyin | Kaynak