Kendalikan scroll Anda - menyesuaikan efek pull-to-refresh dan overflow

TL;DR

Properti overscroll-behavior CSS memungkinkan developer mengganti perilaku scroll overflow default browser saat mencapai bagian atas/bawah konten. Kasus penggunaan mencakup menonaktifkan fitur pull-to-refresh di perangkat seluler, menghapus efek overscroll glow dan rubberbanding, dan mencegah konten halaman di-scroll saat berada di bawah modal/overlay.

Latar belakang

Batas scroll dan rantai scroll

Men-scroll adalah salah satu cara paling mendasar untuk berinteraksi dengan halaman, tetapi pola UX tertentu dapat sulit ditangani karena perilaku default browser yang aneh. Sebagai contoh, ambil panel samping aplikasi dengan sejumlah besar item yang mungkin harus di-scroll oleh pengguna. Saat mencapai bagian bawah, penampung tambahan akan berhenti men-scroll karena tidak ada lagi konten untuk digunakan. Dengan kata lain, pengguna mencapai "batas scroll". Namun, perhatikan apa yang terjadi jika pengguna terus men-scroll. Konten di belakang panel samping mulai di-scroll. Scroll diambil oleh penampung induk; halaman utama itu sendiri dalam contoh.

Ternyata perilaku ini disebut scroll chaining; perilaku default browser saat men-scroll konten. Sering kali setelan default cukup bagus, tetapi terkadang tidak diinginkan atau bahkan tidak terduga. Aplikasi tertentu mungkin ingin memberikan pengalaman pengguna yang berbeda saat pengguna mencapai batas scroll.

Efek tarik untuk memuat ulang

Pull-to-refresh adalah gestur intuitif yang dipopulerkan oleh aplikasi seluler seperti Facebook dan Twitter. Menarik ke umpan sosial dan melepaskannya akan menciptakan ruang baru untuk memuat postingan terbaru. Faktanya, UX khusus ini telah menjadi sangat populer sehingga browser seluler seperti Chrome di Android telah mengadopsi efek yang sama. Menggeser ke bawah di bagian atas halaman akan menyegarkan seluruh halaman:

Untuk situasi seperti PWA Twitter, mungkin sebaiknya nonaktifkan tindakan tarik untuk memuat ulang native. Mengapa? Dalam aplikasi ini, Anda mungkin tidak ingin pengguna memuat ulang halaman secara tidak sengaja. Ada juga potensi untuk melihat animasi muat ulang ganda. Atau, sebaiknya menyesuaikan tindakan browser, dengan menyelaraskannya lebih dekat dengan branding situs. Sayangnya, jenis penyesuaian ini sulit dilakukan. Developer akhirnya menulis JavaScript yang tidak perlu, menambahkan pemroses sentuhan non-pasif (yang memblokir scroll), atau menempelkan seluruh halaman dalam <div> 100vw/vh (untuk mencegah halaman meluap). Solusi ini memiliki dampak negatif yang terdokumentasi dengan baik terhadap performa scroll.

Kita bisa melakukan yang lebih baik.

Memperkenalkan overscroll-behavior

Properti overscroll-behavior adalah fitur CSS baru yang mengontrol perilaku yang terjadi saat Anda men-scroll penampung secara berlebihan (termasuk halaman itu sendiri). Anda dapat menggunakannya untuk membatalkan rantai scroll, menonaktifkan/menyesuaikan tindakan tarik untuk memuat ulang, menonaktifkan efek rubberbanding di iOS (saat Safari menerapkan overscroll-behavior), dan lainnya. Bagian terbaiknya adalah menggunakan overscroll-behavior tidak akan memengaruhi performa halaman secara negatif seperti hack yang disebutkan di pengantar.

Properti ini memiliki tiga kemungkinan nilai:

1. auto - Default. Scroll yang berasal dari elemen dapat diterapkan ke elemen ancestor.
2. contain - mencegah rantai scroll. Scroll tidak menyebar ke ancestor, tetapi efek lokal dalam node ditampilkan. Misalnya, efek cahaya overscroll di Android atau efek rubberbanding di iOS yang memberi tahu pengguna saat mereka mencapai batas scroll. Catatan: penggunaan overscroll-behavior: contain pada elemen html akan mencegah tindakan navigasi overscroll.
3. none - sama seperti contain, tetapi juga mencegah efek overscroll dalam node itu sendiri (misalnya, glow overscroll Android atau rubberbanding iOS).

Mari kita pelajari beberapa contoh untuk melihat cara menggunakan overscroll-behavior.

Mencegah scroll keluar dari elemen posisi tetap

Skenario kotak chat

Pertimbangkan kotak chat yang diposisikan tetap di bagian bawah halaman. Tujuannya adalah bahwa kotak chat adalah komponen mandiri dan di-scroll secara terpisah dari konten di belakangnya. Namun, karena rantai scroll, dokumen mulai di-scroll segera setelah pengguna mencapai pesan terakhir dalam histori chat.

Untuk aplikasi ini, sebaiknya scroll yang berasal dari chatbox tetap berada dalam chat. Kita dapat melakukannya dengan menambahkan overscroll-behavior: contain ke elemen yang menyimpan pesan chat:

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

Pada dasarnya, kita membuat pemisahan logis antara konteks scroll kotak chat dan halaman utama. Hasil akhirnya adalah halaman utama tetap berada di tempatnya saat pengguna mencapai bagian atas/bawah histori chat. Scroll yang dimulai di chatbox tidak akan menyebar.

Skenario overlay halaman

Variasi lain dari skenario "underscroll" adalah saat Anda melihat konten yang di-scroll di belakang overlay posisi tetap. overscroll-behavior hadiah gratis sudah siap! Browser mencoba membantu, tetapi akhirnya membuat situs terlihat bermasalah.

Contoh - modal dengan dan tanpa overscroll-behavior: contain:

Menonaktifkan tarik untuk memuat ulang

Menonaktifkan tindakan tarik untuk memuat ulang adalah satu baris CSS. Cukup cegah rantai scroll di seluruh elemen yang menentukan area pandang. Dalam sebagian besar kasus, parameter tersebut adalah <html> atau <body>:

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

Dengan penambahan sederhana ini, kita memperbaiki animasi tarik-untuk-memuat ganda di demo chatbox dan dapat menerapkan efek kustom yang menggunakan animasi pemuatan yang lebih rapi. Seluruh kotak masuk juga akan diburamkan saat kotak masuk dimuat ulang:

Berikut adalah cuplikan kode lengkap:

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

Menonaktifkan efek glow overscroll dan rubberband

Untuk menonaktifkan efek pantulan saat mencapai batas scroll, gunakan overscroll-behavior-y: none:

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

Demo lengkap

Dengan menggabungkan semuanya, demo chatbox lengkap menggunakan overscroll-behavior untuk membuat animasi pull-to-refresh kustom dan menonaktifkan scroll agar tidak keluar dari widget chatbox. Hal ini memberikan pengalaman pengguna optimal yang akan sulit dicapai tanpa CSS overscroll-behavior.