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 zincirleme

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 çıkmak zor olabilir. varsayılan davranışlar. Örneğin, kullanıcının kaydırması gerekebilecek çok sayıda öğenin bulunduğu bir uygulama çekmecesini ele alalım. Kullanıcılar en alta ulaştığında, taşma kapsayıcısı kaydırmayı durdurur çünkü tüketilebilecek başka içerik yoktur. Başka bir deyişle, kullanıcı bir "kaydırma sınırına" ulaşır. Ancak kullanıcı bu reklamları görmeye devam ederse ne olduğuna kaydırabilirsiniz. Çekmecenin arkasındaki içerik kaydırmaya başlar. Kaydırma (şimdiki değeri) üst kapsayıcı tarafından ele geçirildiğinden; ana sayfanın kendisi gösterilir.

Bu davranışın adı kaydırma zincirleme. Tarayıcının içerik kaydırırken varsayılan davranışıdır. Varsayılan ayar genellikle oldukça iyidir ancak bazen istenmeyen veya beklenmedik sonuçlara yol açabilir. Bazı uygulamalar Kullanıcı kaydırma sınırına ulaştığında farklı bir kullanıcı deneyimi sağlar.

Yenilemek için aşağı çekme efekti

Yenilemek için çekme, aşağıdakiler gibi mobil uygulamalar tarafından popüler hale gelen sezgisel bir harekettir: Facebook ve Twitter. Sosyal medya özet akışını aşağı çekip bıraktığınızda daha yeni gönderilerin yüklenmesi için yeni alan açılır. Bu kullanıcı deneyimi o kadar popüler oldu ki Android'deki Chrome gibi mobil tarayıcılar da aynı efekti benimsedi. Sayfanın üst kısmından aşağı kaydırarak sayfanın tamamını yenileyebilirsiniz:

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ğiyle daha uyumlu hale getirerek, tarayıcının işlemini özelleştirmek, 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 geçici çözümlerin, kaydırma performansı üzerinde iyi belgelenmiş olumsuz etkileri vardır.

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 zincirleme işlemini iptal etmek, yenilemek için çekme 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 bu özelliği kullanabilirsiniz. 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.

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

1. auto: Varsayılan. Öğede bulunan kaydırmalar üst öğeler olarak tanımlanır.
2. contain: Kaydırma zincirlemeyi engeller. 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ı).

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 sabit konumlu bir sohbet kutusu düşünün. Amaç, sohbet kutusunun bağımsız bir bileşen olması ve arkasındaki içerikten ayrı olarak kayması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 gerçekleştirmek için 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 kutusunda başlayan kaydırmalar yayılmaz.

Sayfa yerleşimi senaryosu

"Ekranın altında kaydırma" senaryosunun bir başka varyasyonu da sabit konum yer paylaşımının arkasında kaydırılan içeriktir. Ölümcül hediye overscroll-behavior hazır. Tarayıcı yardımcı olmaya çalışıyor ancak sitenin hatalı görünmesine neden oluyor.

Ö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 sürükle işlemini devre dışı bırakmak tek bir CSS satırıdır. Görünüm alanını tanımlayan öğenin tamamında kaydırma zincirleme işlemini engellemeniz yeterlidir. Çoğu durumda bu, <html> veya <body>:

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

Bu basit eklemeyle, sayfayı yenilemek 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:

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>

Kaydırma sırasında parlama 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:

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

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