Dua browser masuk entah ke mana scrollbar ...

Bilah gulir (bilah gulir) adalah mekanisme sederhana namun efektif yang bertindak sebagai sarana utama untuk Anda dapat melihat dokumen besar. Tapi itu tidak semua yang mampu dilakukan scrollbar! Buku kerja sederhana ini juga cukup bagus untuk memberi tahu pengguna apa ukuran dokumen yang berinteraksi dengan mereka. Akibatnya, scrollbar membawa beban ganda. Mereka membantu bekerja dengan berbagai bahan, dan memberi tahu pengguna tentang ukuran bahan-bahan ini.

Logika scrollbar yang sederhana dan dapat dimengerti dapat diubah selama implementasi mekanisme scrolljacking. Ini terjadi ketika perilaku standar bilah gulir berubah, yang melanggar yang diharapkan oleh korespondensi pengguna antara panjang dokumen dan tinggi bilah gulir.

Selain itu, program untuk perangkat dengan layar sentuh telah mempopulerkan gagasan menyembunyikan bilah gulir. Dengan pendekatan ini, bilah gulir tidak terlihat sampai pengguna mulai menggulir elemen yang tidak cocok di area tampilan tertentu. Akibatnya, ternyata demi daya tarik visual dari aplikasi, desainer mengorbankan kejelasan antarmuka. Pengguna mungkin perlu waktu untuk memahami bahwa konten dalam wadah tertentu dapat digulir. Wadah seperti itu mungkin terlihat seperti tidak mendukung pengguliran, atau seolah-olah tidak perlu digulir.

Sistem operasi desktop klasik telah merangkul tren ponsel ini, berusaha meminimalkan gangguan scrollbar tradisional dalam desain aplikasi.

Bahan, terjemahan yang kami terbitkan hari ini, dikhususkan untuk beberapa fitur penggunaan scrollbar di aplikasi web.

Beberapa terminologi

Sebelum kita melanjutkan - mari kita tentukan beberapa istilah yang akan kita gunakan di sini. Yaitu, kami membedakan dua jenis scrollbar:

• Memperbaiki scrollbar (obtrusive) - yang menempati ruang layar. Mereka tidak tumpang tindih dengan konten yang Anda lihat, tetapi malah duduk di sebelahnya.
• Bilah gulir tidak tetap (tidak mengganggu) - bilah yang tumpang tindih konten. Mereka tidak mengambil ruang layar dari apa yang ada di wadah tempat mereka berada.

Perilaku standar scrollbar modern

Secara default, bilah gulir iOS dan Android tidak terpasang.

Dalam macOS (khususnya, kita berbicara tentang macOS Mojave yang relevan pada saat penulisan materi ini) scrollbar disembunyikan sampai elemen mulai bergulir. Ini adalah perilaku standar sistem dalam situasi ketika mouse tidak terhubung ke komputer. Ada tiga opsi untuk menampilkan scrollbar (pengaturan yang sesuai dapat ditemukan di General > System Preferences ).


Pengaturan scrollbar di macOS Mojave

Ditemukan bahwa pengaturan ini mengontrol perilaku scrollbar di Chrome, Firefox, dan di Edge baru berdasarkan Chromium.

Berikut adalah video, yang dapat Anda tonton untuk mempelajari tentang bagaimana pengaturan di atas memengaruhi scrollbar, dan bagaimana scrollbar, selain memungkinkan Anda untuk menggulir konten, memengaruhi itu. Berikut beberapa kutipan dari video ini.


Scrollbar tetap di macOS selalu terlihat dan memakan ruang layar


Scrollbar MacOS non-tetap overlay konten sambil menggulir dokumen


Scrollbar yang tidak diperbaiki di macOS disembunyikan saat dokumen tidak digulir

Di Windows 10, di Settings > Display > Simplify and personalize Windows , Anda dapat menemukan pengaturan serupa.


Pengaturan scrollbar di Windows 10

Sayangnya, bahkan ketika secara Automatically hide scroll bars in Windows , itu tidak mempengaruhi Firefox, Chrome, Internet Explorer, dan Edge. Dalam kasus Edge, kita berbicara tentang varian browser berdasarkan Chromium dan varian berdasarkan EdgeHTML.

Ikhtisar Tugas

Inilah tampilan halaman yang kami tinjau di atas pada macOS di Windows.


Halaman scrollbar Windows

Bilah gulir Windows diperbaiki secara default. Selain itu, mereka terlihat cukup "berat" dalam hal desain. Mereka, dalam versi standar mereka, jauh lebih luas daripada rekan-rekan mereka dari macOS. Selain itu, warna scrollbar di Windows biasanya cocok dengan pengaturan sistem, dan bukan palet warna halaman web.

Desainer yang terbiasa dengan lingkungan macOS, tetapi yang mengembangkan aplikasi web yang dirancang untuk platform yang berbeda, mungkin merasa sulit untuk membuat proyek mereka terlihat bagus di OS yang berbeda dan tidak menghabiskan terlalu banyak sumber daya sistem untuk rendering.

Persyaratan proyek

Kami ingin mengembangkan aplikasi web, scrollbar yang digunakan berbeda dalam fitur berikut:

• Mereka harus terlihat menarik saat melihat halaman pada OS desktop. Ini sangat penting saat menampilkan wadah yang isinya tidak sepenuhnya sesuai dengan wadah. Scrollbar ditampilkan di dalam wadah tersebut, yang berarti bahwa desain scrollbar ini harus sesuai dengan desain kontainer. Kami percaya bahwa dalam kasus scrollbar yang memungkinkan Anda untuk menggulir seluruh halaman, ini tidak begitu penting, tetapi ini tidak diragukan lagi merupakan masalah kontroversial.
• Kami ingin meminimalkan ruang layar yang dapat digunakan bilah gulir. Di Windows, scrollbar, secara default, sudah diperbaiki dan sangat lebar.
• Kami ingin fokus pada pengaturan sistem. Jika pengguna memilih opsi non-standar dalam pengaturan yang menentukan perilaku scrollbar, kami harus mempertimbangkan ini jika memungkinkan.
• Kami berusaha keras untuk menghindari penggunaan solusi JavaScript yang berat (seperti plugin OverlayScrollbars yang sangat bagus), yang dirancang untuk bekerja dengan scrollbar yang tidak tetap. Mereka membuat banyak beban pada komputer klien.

Seberapa jauh saya bisa menggunakan CSS?

Berikut adalah kode untuk elemen penampung yang digunakan untuk kelas overflowing-element , dan juga kode CSS untuk menatanya:

 <div class="overflowing-element"></div> .overflowing-element {  overflow-y: auto;  -webkit-overflow-scrolling: touch;  -ms-overflow-style: -ms-autohiding-scrollbar; } 

Jika Anda memerlukan bilah gulir tidak tetap di Internet Explorer dan di Edge berdasarkan EdgeHTML, ini berarti bahwa -ms-overflow-style: -ms-autohiding-scrollbar; . Dengan penggunaannya, semuanya akan berfungsi sebagaimana mestinya (itu cukup sederhana - kan?).

Ketika iOS 13 keluar, ternyata properti -webkit-overflow-scrolling: touch mungkin tidak diperlukan untuk meningkatkan fisika pengguliran. Meskipun, jika Anda perlu mendukung versi iOS yang lebih lama, lebih baik tidak menolak untuk menggunakan properti ini.

Jika kita berbicara tentang properti CSS yang terkait dengan pengguliran, maka mungkin berguna untuk membaca tentang properti perilaku overscroll . Ini memungkinkan Anda untuk mengontrol perilaku sistem ketika mencapai batas elemen yang mendukung pengguliran.

IrFirefox

Browser Firefox mendukung properti CSS tanpa awalan. Ini adalah warna scrollbar dan lebar scrollbar .

Contoh berikut menggunakan variabel CSS yang tidak didukung di Internet Explorer 11 untuk kejelasan:

 :root {  --scrollbar-track-color: transparent;  --scrollbar-color: rgba(0,0,0,.2);  --scrollbar-width: thin; /* or `auto` or `none` */ } .overflowing-element {  scrollbar-width: var(--scrollbar-width);  scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color); } 

▍Krom dan Safari, browser Edge berbasis Chromium, dan browser lainnya

Browser berbasis Webkit dan Blink mendukung elemen pseudo khusus yang dirancang untuk menyesuaikan scrollbar:

 :root {  --scrollbar-track-color: transparent;  --scrollbar-color: rgba(0,0,0,.2);  --scrollbar-size: .375rem;  --scrollbar-minlength: 1.5rem; /*     ( ,  ) */ } .overflowing-element::-webkit-scrollbar {  height: var(--scrollbar-size);  width: var(--scrollbar-size); } .overflowing-element::-webkit-scrollbar-track {  background-color: var(--scrollbar-track-color); } .overflowing-element::-webkit-scrollbar-thumb {  background-color: var(--scrollbar-color);  /*   -  :hover :active */ } .overflowing-element::-webkit-scrollbar-thumb:vertical {  min-height: var(--scrollbar-minlength); } .overflowing-element::-webkit-scrollbar-thumb:horizontal {  min-width: var(--scrollbar-minlength); } 

Berikut adalah contoh pada CodePen, menunjukkan kemampuan untuk menyesuaikan scrollbar, dilakukan secara eksklusif oleh CSS. Dan ini adalah contoh yang menunjukkan perilaku standar scrollbar. Anda bisa membandingkannya.

Perlu dicatat bahwa kode di atas memiliki satu masalah. Terdiri dari fakta bahwa ketika mengatur properti height atau width dari pseudo-element ::-webkit-scrollbar di macOS, ::-webkit-scrollbar non-tetap diganti dengan yang tetap (pengaturan standar didefinisikan ulang). Namun, ini tidak sulit untuk diperbaiki dengan sepotong kecil kode JavaScript.

CSS dan sedikit JS

Kami dapat menambahkan sejumlah kecil kode JavaScript ke proyek, yang memungkinkan kami mengetahui apakah bilah gulir standar sudah diperbaiki atau tidak. Itu terlihat seperti ini:

 /* *   . *   body   `layout-scrollbar-obtrusive` *   ,     . */ var parent = document.createElement("div"); parent.setAttribute("style", "width:30px;height:30px;"); parent.classList.add('scrollbar-test'); var child = document.createElement("div"); child.setAttribute("style", "width:100%;height:40px"); parent.appendChild(child); document.body.appendChild(parent); //   .    //   30px,    . var scrollbarWidth = 30 - parent.firstChild.clientWidth; if(scrollbarWidth) {  document.body.classList.add("layout-scrollbar-obtrusive"); } document.body.removeChild(parent); 

Jika scrollbar diperbaiki, kami menambahkan kelas layout-scrollbar-obtrusive ke elemen dokumen body . Kelas ini dapat digunakan untuk menyesuaikan properti width dan height hanya dari scrollbar tetap. Ini menghindari gangguan yang dijelaskan di atas dalam perilaku scrollbar. Selama intervensi ini, scrollbar berubah dan proyek menjauh dari pengaturan sistem yang dibuat oleh pengguna. Ini adalah style untuk kelas layout-scrollbar-obtrusive :

 .layout-scrollbar-obtrusive .layout-scrollbar::-webkit-scrollbar {  height: var(--scrollbar-size);  width: var(--scrollbar-size); } 

Di sini Anda dapat menemukan contoh penerapan teknik yang menggunakan CSS dan JavaScript secara bersamaan. Di sini , untuk perbandingan, adalah contoh yang menunjukkan perilaku standar suatu sistem.

Ringkasan: tinjauan solusi untuk masalah tersebut

Pada perangkat dengan layar sentuh yang menggunakan scrollbar tidak tetap (yaitu, pada perangkat iOS dan Android), kami cukup menggunakan perilaku standar scrollbar.

Di macOS, kami memiliki kesempatan untuk memperhitungkan pengaturan sistem yang dibuat oleh pengguna. Ini berarti bahwa kami tidak secara tidak sengaja beralih di antara scrollbar yang tidak tetap dan yang diperbaiki. Kami hanya menerapkan gaya pada bilah gulir yang diperbaiki yang selalu terlihat. Ini memungkinkan kami untuk membawa tampilan halaman sesuai dengan persyaratan desain proyek kami.

Di Windows, yaitu, di peramban Firefox dan Chrome, tidak ada bilah gulir yang tidak diperbaiki standar, tetapi di sini, seperti dalam kasus lain, kami dapat menerapkan pendekatan kami, yang menggunakan fitur CSS eksklusif. Karena kenyataan bahwa kami dapat menemukan contoh kerja menggunakan scrollbar yang dapat disesuaikan dengan CSS, kami dapat mencapai kesepakatan dengan tim desain kami. Kami menyelesaikan kompromi dan menghindari menggunakan solusi JavaScript yang berat.

Berikut adalah proyek-proyek demo, yang intinya dijelaskan di atas:

• Menampilkan perilaku scrollbar standar.
• Solusi yang hanya menggunakan CSS. Semua bilah gulir ditata.
• Solusi yang menggunakan CSS dan JavaScript. Hanya scrollbar yang diperbaiki yang ditata.

Pembaca yang budiman! Bagaimana Anda gaya scrollbar di proyek Anda?