TL;DR (Ringkasan)
Properti overscroll-behavior
CSS memungkinkan developer mengganti
perilaku scroll tambahan default browser saat mencapai bagian atas/bawah
konten. Kasus penggunaan mencakup penonaktifan fitur tarik untuk refresh
di perangkat seluler, menghapus glow overscroll dan efek rubberbanding,
serta 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 mungkin sulit ditangani karena perilaku default default dari browser. Sebagai contoh, ambil panel daftar aplikasi dengan banyak 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 {i>default-<i}nya 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 refresh
Tarik untuk 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 menggunakan efek yang sama. Menggeser ke bawah di bagian atas halaman akan menyegarkan seluruh halaman:
Untuk situasi seperti PWA Twitter,
sebaiknya nonaktifkan tindakan pull-to-refresh native. Mengapa demikian? Dalam aplikasi
ini, Anda mungkin tidak ingin pengguna memuat ulang halaman secara tidak sengaja. Ada
kemungkinan untuk melihat animasi refresh ganda. Atau, mungkin akan lebih baik untuk menyesuaikan tindakan browser, sehingga lebih menyelaraskannya dengan branding situs. Bagian yang disayangkan adalah jenis penyesuaian ini
sulit untuk dilakukan. Developer akhirnya menulis JavaScript yang tidak perlu, menambahkan
pemroses sentuh non-pasif (yang memblokir scroll), atau menempelkan seluruh halaman dengan <div>
100vw/vh (untuk mencegah halaman meluap). Solusi ini memiliki efek negatif yang terdokumentasi dengan baik terhadap performa scroll.
Kita bisa lebih baik lagi!
Memperkenalkan overscroll-behavior
Properti overscroll-behavior
adalah fitur CSS baru yang mengontrol
perilaku apa yang terjadi saat Anda men-scroll penampung secara berlebihan (termasuk
halaman itu sendiri). Anda dapat menggunakannya untuk membatalkan perantaian scroll, menonaktifkan/menyesuaikan tindakan tarik untuk refresh, menonaktifkan efek rubberbanding di iOS (saat Safari menerapkan overscroll-behavior
), dan banyak lagi.
Bagian terbaiknya adalah menggunakan overscroll-behavior
tidak berdampak buruk
pada performa halaman seperti peretasan yang disebutkan di bagian pengantar.
Properti ini memiliki tiga kemungkinan nilai:
- auto - Default. Scroll yang berasal dari elemen dapat menyebar ke elemen ancestor.
- contain - mencegah rantai scroll. Scroll tidak menyebar ke ancestor,
tetapi efek lokal dalam node ditampilkan. Misalnya, efek glow overscroll
di Android atau efek rubberbanding di iOS yang memberi tahu pengguna
saat mereka telah mencapai batas scroll. Catatan: penggunaan
overscroll-behavior: contain
pada elemenhtml
akan mencegah tindakan navigasi overscroll. - 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 meng-escape elemen posisi tetap
Skenario kotak chat
Pertimbangkan kotak chat yang diposisikan dengan tetap yang berada di bagian bawah halaman. Tujuannya adalah agar kotak chat menjadi komponen yang berdiri sendiri 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, akan lebih tepat untuk memiliki scroll yang berasal dari
kotak chat 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 ditampilkan saat pengguna mencapai bagian atas/bawah histori chat. Scroll yang dimulai di kotak chat tidak akan menyebar.
Skenario overlay halaman
Variasi lain dari skenario "underscroll" adalah saat Anda melihat konten
di-scroll di belakang overlay posisi tetap. Hadiah belum tentu
overscroll-behavior
sudah tepat! {i>Browser<i} mencoba membantu, tetapi
akhirnya membuat situs terlihat berisi bug.
Contoh - modal dengan dan tanpa overscroll-behavior: contain
:
Menonaktifkan tarik untuk refresh
Menonaktifkan tindakan tarik untuk refresh adalah satu baris CSS. Cukup jangan membuat 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 refresh ganda dalam demo chatbox dan dapat menerapkan efek kustom yang menggunakan animasi pemuatan yang lebih rapi. Seluruh kotak masuk juga menjadi blur 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
Menyatukan semuanya, demo chatbox lengkap menggunakan
overscroll-behavior
untuk membuat animasi pull-to-refresh kustom
dan menonaktifkan scroll agar tidak keluar dari widget kotak chat. Hal ini memberikan pengalaman
pengguna optimal yang akan sulit dicapai tanpa CSS
overscroll-behavior
.