Gulir Memantul Di Situs Web Anda

Scroll bouncing (juga terkadang disebut sebagai scroll 'rubber-banding', atau 'elastic scrolling') sering digunakan untuk merujuk pada efek yang Anda lihat saat Anda menggulir ke bagian paling atas halaman atau elemen HTML, atau ke bagian bawah halaman atau elemen, pada perangkat yang menggunakan layar sentuh atau trackpad, dan ruang kosong dapat terlihat sesaat sebelum elemen atau halaman muncul kembali dan menyejajarkan dirinya kembali ke atas/bawahnya (saat Anda melepaskan sentuhan/jari). Anda dapat melihat efek serupa terjadi di CSS scroll-gertakan antar elemen.

Namun, artikel ini berfokus pada gulir yang memantul saat Anda menggulir ke bagian paling atas atau paling bawah halaman web. Dengan kata lain, ketika scrollport telah mencapai batas gulirnya.

Pemahaman yang baik tentang scroll bouncing sangat berguna karena akan membantu Anda memutuskan bagaimana Anda membangun situs web dan bagaimana Anda ingin halaman bergulir.

Gulir memantul tidak diinginkan jika Anda tidak ingin melihat elemen fixed pada perpindahan halaman. Beberapa contoh termasuk: ketika Anda ingin header atau footer diperbaiki pada posisi tertentu, atau jika Anda ingin elemen lain seperti menu diperbaiki, atau jika Anda ingin halaman di-scroll-snap pada posisi tertentu pada scroll dan Anda tidak ingin pengguliran tambahan terjadi di bagian paling atas atau bawah halaman yang akan membingungkan pengunjung situs web Anda. Artikel ini akan mengusulkan beberapa solusi untuk masalah yang dihadapi ketika berhadapan dengan gulir yang memantul di bagian paling atas atau bawah halaman web.

Pertemuan Pertama Saya Dengan Efeknya

Saya pertama kali melihat efek ini ketika saya memperbarui situs web yang saya buat sejak lama. Anda dapat melihat situs webnya di sini. Footer di bagian bawah halaman seharusnya tetap pada posisinya di bagian bawah halaman dan tidak bergerak sama sekali. Pada saat yang sama, Anda seharusnya dapat menggulir ke atas dan ke bawah melalui konten utama halaman. Idealnya, ini akan berfungsi seperti ini:

Saat ini bekerja dengan cara ini di Firefox atau di browser apa pun di perangkat tanpa layar sentuh atau trackpad. Namun, saat itu, saya menggunakan Chrome di MacBook. Saya menggulir ke bagian bawah halaman menggunakan trackpad ketika saya menemukan bahwa situs web saya tidak berfungsi dengan benar. Anda dapat melihat apa yang terjadi di sini:

Oh tidak! Bukan ini yang seharusnya terjadi! Saya telah mengatur posisi footer berada di bagian bawah halaman dengan mengatur properti CSS position -nya agar memiliki nilai fixed . Ini juga saat yang tepat untuk meninjau kembali position: fixed; adalah. Menurut Spesifikasi CSS 2.1, ketika "kotak" (dalam hal ini, footer biru tua) diperbaiki, "diperbaiki sehubungan dengan viewport dan tidak bergerak saat digulir." Artinya, footer tidak seharusnya bergerak saat Anda menggulir ke atas dan ke bawah halaman. Inilah yang membuat saya khawatir ketika saya melihat apa yang terjadi di Chrome.

Untuk membuat artikel ini lebih lengkap, saya akan menunjukkan kepada Anda bagaimana halaman bergulir di Mobile Edge, Mobile Safari dan Desktop Safari di bawah ini. Ini berbeda dengan apa yang terjadi saat menggulir di Firefox dan Chrome. Saya harap ini memberi Anda pemahaman yang lebih baik tentang bagaimana kode yang sama persis saat ini bekerja dengan cara yang berbeda. Saat ini merupakan tantangan untuk mengembangkan pengguliran yang bekerja dengan cara yang sama di berbagai browser web.

Mencari Solusi

Salah satu pemikiran pertama saya adalah bahwa akan ada cara mudah dan cepat untuk memperbaiki masalah ini di semua browser. Artinya, saya pikir saya dapat menemukan solusi yang membutuhkan beberapa baris kode CSS dan tidak ada JavaScript yang terlibat. Oleh karena itu, salah satu hal pertama yang saya lakukan, adalah mencoba untuk mencapai ini. Peramban yang saya gunakan untuk pengujian termasuk Chrome, Firefox dan Safari di macOS dan Windows 10, serta Edge dan Safari di iOS. Versi browser ini adalah yang terbaru pada saat artikel ini ditulis (2018).

Solusi Khusus HTML Dan CSS

Pemosisian Absolut Dan Relatif

Salah satu hal pertama yang saya coba, adalah menggunakan pemosisian absolut dan relatif untuk memposisikan footer karena saya sudah terbiasa membuat footer seperti ini. Idenya adalah mengatur halaman web saya ke ketinggian 100% sehingga footer selalu berada di bagian bawah halaman dengan ketinggian tetap, sementara konten mengambil 100% dikurangi ketinggian footer dan Anda dapat menggulirnya. Atau, Anda dapat mengatur padding-bottom daripada menggunakan calc dan mengatur tinggi body-container menjadi 100% sehingga konten aplikasi tidak tumpang tindih dengan footer. Kode CSS terlihat seperti ini:

 html { width: 100%; height: 100%; overflow: hidden; position: relative; } body { width: 100%; margin: 0; font-family: sans-serif; height: 100%; overflow: hidden; } .body-container { height: calc(100% - 100px); overflow: auto; } .color-picker-main-container { width: 100%; font-size: 22px; padding-bottom: 10px; } footer { position: absolute; bottom: 0; height: 100px; width: 100%; }

Solusi ini bekerja dengan cara yang hampir sama dengan solusi aslinya (yang baru saja position: fixed; ). Salah satu keuntungan dari solusi ini dibandingkan dengan itu adalah bahwa gulir tidak untuk seluruh halaman, tetapi hanya untuk isi halaman tanpa footer. Masalah terbesar dengan metode ini adalah di Mobile Safari, baik footer dan konten aplikasi bergerak secara bersamaan. Ini membuat pendekatan ini sangat bermasalah saat menggulir dengan cepat:

Efek lain yang tidak saya inginkan sulit untuk diperhatikan pada awalnya, dan saya baru menyadari bahwa itu terjadi setelah mencoba lebih banyak solusi. Ini sedikit lebih lambat untuk menggulir konten aplikasi saya. Karena kami menyetel tinggi wadah gulir ke 100% dari dirinya sendiri, ini menghalangi pengguliran berbasis film/momentum di iOS. Jika tinggi 100% itu lebih pendek (misalnya, ketika tinggi 100% 2000 piksel menjadi tinggi 100% 900 piksel), pengguliran berbasis momentum menjadi lebih buruk. Pengguliran berbasis jentik/momentum terjadi saat Anda menjentikkan pada permukaan layar sentuh dengan jari Anda dan halaman bergulir dengan sendirinya. Dalam kasus saya, saya ingin pengguliran berbasis momentum terjadi sehingga pengguna dapat menggulir dengan cepat, jadi saya menjauh dari solusi yang menetapkan ketinggian 100%.

Upaya lainnya

Salah satu solusi yang disarankan di web, dan yang saya coba gunakan pada kode saya, ditunjukkan di bawah ini sebagai contoh.

 html { width: 100%; position: fixed; overflow: hidden; } body { width: 100%; margin: 0; font-family: sans-serif; position: fixed; overflow: hidden; } .body-container { width: 100vw; height: calc(100vh - 100px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .color-picker-main-container { width: 100%; font-size: 22px; padding-bottom: 10px; } footer { position: fixed; bottom: 0; height: 100px; width: 100%; }

Kode ini berfungsi di Chrome dan Firefox di macOS dengan cara yang sama seperti solusi sebelumnya. Keuntungan dari metode ini adalah bahwa gulir tidak dibatasi hingga ketinggian 100%, sehingga pengguliran berbasis momentum berfungsi dengan baik. Namun, di Safari, footer menghilang:

Di iOS Safari, footer menjadi lebih pendek, dan ada celah ekstra transparan (atau putih) di bagian bawah. Juga, kemampuan untuk menggulir halaman hilang setelah Anda menggulir ke bagian paling bawah. Anda dapat melihat celah putih di bawah footer di sini:

Satu baris kode menarik yang mungkin sering Anda lihat adalah: -webkit-overflow-scrolling: touch; . Gagasan di balik ini adalah memungkinkan pengguliran berbasis momentum untuk elemen tertentu. Properti ini dijelaskan sebagai "non-standar" dan sebagai "tidak pada jalur standar" dalam dokumentasi MDN. Itu muncul sebagai "Nilai properti tidak valid" dalam pemeriksaan di Firefox dan Chrome, dan tidak muncul sebagai properti di Desktop Safari. Saya tidak menggunakan properti CSS ini pada akhirnya.

Untuk menunjukkan contoh lain dari solusi yang mungkin Anda temui dan hasil berbeda yang saya temukan, saya juga mencoba kode di bawah ini:

 html { position: fixed; height: 100%; overflow: hidden; } body { font-family: sans-serif; margin: 0; width: 100vw; height: 100vh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .color-picker-main-container { width: 100%; font-size: 22px; padding-bottom: 110px; } footer { position: fixed; }

Ini benar-benar berfungsi dengan baik di berbagai browser desktop, pengguliran berbasis momentum masih berfungsi, dan footer diperbaiki di bagian bawah dan tidak bergerak di browser web desktop. Mungkin bagian yang paling bermasalah dari solusi ini (dan yang membuatnya unik) adalah, pada Safari iOS, footer selalu bergetar dan sedikit terdistorsi dan Anda dapat melihat konten di bawahnya setiap kali Anda menggulir.

Solusi Dengan JavaScript

Setelah mencoba beberapa solusi awal hanya menggunakan HTML dan CSS, saya mencoba beberapa solusi JavaScript. Saya ingin menambahkan bahwa ini adalah sesuatu yang tidak saya sarankan untuk Anda lakukan dan lebih baik Anda hindari. Dari pengalaman saya, biasanya ada solusi yang lebih elegan dan ringkas hanya dengan menggunakan HTML dan CSS. Namun, saya telah menghabiskan banyak waktu untuk mencoba solusi lain, saya pikir tidak ada salahnya untuk segera melihat apakah ada beberapa solusi alternatif yang menggunakan JavaScript.

Acara Sentuh

Salah satu pendekatan untuk memecahkan masalah bouncing gulir adalah dengan mencegah peristiwa touchmove atau touchstart pada window atau document . Gagasan di balik ini adalah bahwa peristiwa sentuh pada jendela keseluruhan dicegah, sementara peristiwa sentuh pada konten yang ingin Anda gulir diizinkan. Contoh kode seperti ini ditunjukkan di bawah ini:

 // Prevents window from moving on touch on older browsers. window.addEventListener('touchmove', function (event) { event.preventDefault() }, false) // Allows content to move on touch. document.querySelector('.body-container').addEventListener('touchmove', function (event) { event.stopPropagation() }, false)

Saya mencoba banyak variasi kode ini untuk mencoba membuat gulir berfungsi dengan baik. Mencegah touchmove di window tidak ada bedanya. Menggunakan document tidak ada bedanya. Saya juga mencoba menggunakan touchstart dan touchmove untuk mengontrol pengguliran, tetapi kedua metode ini juga tidak membuat perbedaan. Saya mengetahui bahwa Anda tidak dapat lagi memanggil event.preventDefault() dengan cara ini karena alasan kinerja. Anda harus menyetel opsi passive ke false di pendengar acara:

 // Prevents window from moving on touch on newer browsers. window.addEventListener('touchmove', function (event) { event.preventDefault() }, {passive: false})

Perpustakaan

Anda mungkin menemukan perpustakaan yang disebut "iNoBounce" yang dibuat untuk "menghentikan aplikasi web iOS Anda terpental saat menggulir." Satu hal yang perlu diperhatikan saat menggunakan perpustakaan ini sekarang untuk menyelesaikan masalah yang saya jelaskan di artikel ini adalah Anda perlu menggunakan -webkit-overflow-scrolling . Hal lain yang perlu diperhatikan adalah bahwa solusi yang lebih ringkas yang saya dapatkan (yang akan dijelaskan nanti) melakukan hal yang sama seperti di iOS. Anda dapat mengujinya sendiri dengan melihat contoh di Repositori GitHub-nya, dan membandingkannya dengan solusi yang saya dapatkan.

Perilaku Overscroll

Setelah mencoba semua solusi ini, saya mengetahui tentang properti CSS overscroll-behavior . Properti CSS overscroll-behavior diimplementasikan di Chrome 63 pada Desember 2017, dan di Firefox 59 pada Maret 2018. Properti ini, seperti yang dijelaskan dalam dokumentasi MDN, “memungkinkan Anda untuk mengontrol perilaku scroll overflow browser — apa yang terjadi ketika batas area gulir tercapai. ” Ini adalah solusi yang akhirnya saya gunakan.

Yang harus saya lakukan adalah mengatur overscroll-behavior menjadi none di body situs web saya dan saya dapat membiarkan position footer sebagai fixed . Meskipun pengguliran berbasis momentum diterapkan ke seluruh halaman, daripada konten tanpa footer, solusi ini cukup baik untuk saya dan memenuhi semua persyaratan saya pada saat itu, dan footer saya tidak lagi terpental secara tak terduga di Chrome. Mungkin berguna untuk dicatat bahwa Edge memiliki properti ini ditandai sebagai sedang dikembangkan sekarang. overscroll-behavior dapat dilihat sebagai peningkatan jika browser belum mendukungnya.

Kesimpulan

Jika Anda tidak ingin header atau footer tetap Anda terpental di halaman web Anda, Anda sekarang dapat menggunakan properti CSS overscroll-behavior .

Terlepas dari kenyataan bahwa solusi ini bekerja secara berbeda di browser yang berbeda (memantulkan konten halaman masih terjadi di Safari dan Edge, sedangkan di Firefox dan Chrome tidak), itu akan membuat header atau footer tetap saat Anda menggulir ke bagian paling atas atau bagian bawah situs web. Ini adalah solusi ringkas dan pada semua browser yang diuji, pengguliran berbasis momentum masih berfungsi, sehingga Anda dapat menggulir banyak konten halaman dengan sangat cepat. Jika Anda sedang membuat header atau footer tetap di halaman web Anda, Anda dapat mulai menggunakan solusi ini.