Bilah gulir vertikal di html

Untuk bilah yang dapat digulir, gunakan sumbu x dan y. Atur luapan-x. tersembunyi; . mobil;

Mari kita lihat contoh, di mana

dapat digulir secara vertikal

• Tempatkan

  menandai. Tulis beberapa konten di dalamnya

• Membuat

  dengan kelas "gulir"

  
W3docs
  

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when a
    n unknown printer took a galley of type and scrambled it to make a type specimen book. 
    It has survived not only five centuries, but also the leap into electronic typesetting, 
    remaining essentially unchanged. It was popularised in the 1960s with the release of 
    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
    software like Aldus PageMaker including versions of Lorem Ipsum. It is a long 
    established fact that a reader will be distracted by the readable content of a page
    when looking at its layout. The point of using Lorem Ipsum is that it has a 
    more-or-less normal distribution of letters, as opposed to using 'Content here, 
    content here', making it look like readable English. Many desktop publishing packages
    and web page editors now use Lorem Ipsum as their default model text, and a search 
    for 'lorem ipsum' will uncover many web sites still in their infancy.
  

• Atur properti background-color, width, dan height untuk

  elemen

• Gunakan properti overflow-x untuk menentukan apakah konten harus disembunyikan, terlihat, atau bergulir secara horizontal saat konten meluap di tepi kiri dan kanan elemen. Tetapkan nilai "tersembunyi".
• Gunakan properti overflow-y untuk menentukan apakah konten harus disembunyikan, terlihat, atau bergulir secara vertikal saat konten meluap di tepi atas dan bawah elemen. Tetapkan nilai "otomatis".
• Gunakan properti perataan teks dengan nilai "pusat".

div.scroll {
  background-color: #fed9ff;
  width: 600px;
  height: 150px;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
  padding: 20px;
}

_

Mari satukan bagian-bagiannya dan lihat keseluruhan kodenya

  
    Title of the document
    
  
  
    
W3docs
    

      Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
      when an unknown printer took a galley of type and scrambled it to make a type 
      specimen book. It has survived not only five centuries, but also the leap into 
      electronic typesetting, remaining essentially unchanged. It was popularised in 
      the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
      and more recently with desktop publishing software like Aldus PageMaker 
      including versions of Lorem Ipsum. It is a long established fact that a 
      reader will be distracted by the readable content of a page when looking 
      at its layout. The point of using Lorem Ipsum is that it has a more-or-less 
      normal distribution of letters, as opposed to using 'Content here, content here', 
      making it look like readable English. Many desktop publishing packages and 
      web page editors now use Lorem Ipsum as their default model text, and a 
      search for 'lorem ipsum' will uncover many web sites still in their infancy.
    
  

Hasil

Lorem Ipsum hanyalah teks tiruan dari industri percetakan dan penyusunan huruf. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500-an ketika seorang pencetak yang tidak dikenal mengambil kumpulan teks dan mengacaknya untuk membuat buku contoh huruf. Itu bertahan tidak hanya selama lima abad, tetapi juga lompatan ke pengaturan huruf elektronik, yang pada dasarnya tetap tidak berubah. Itu dipopulerkan pada tahun 1960-an dengan dirilisnya lembaran Letraset yang berisi bagian-bagian Lorem Ipsum, dan baru-baru ini dengan perangkat lunak desktop publishing seperti Aldus PageMaker termasuk versi Lorem Ipsum. Sudah menjadi fakta lama bahwa pembaca akan terganggu oleh konten halaman yang dapat dibaca saat melihat tata letaknya. Maksud penggunaan Lorem Ipsum adalah bahwa ia memiliki distribusi huruf yang kurang lebih normal, berlawanan dengan penggunaan 'Konten di sini, konten di sini', membuatnya tampak seperti bahasa Inggris yang dapat dibaca. Banyak paket desktop publishing dan editor halaman web sekarang menggunakan Lorem Ipsum sebagai teks model default mereka, dan pencarian untuk 'lorem ipsum' akan mengungkap banyak situs web yang masih dalam masa pertumbuhan.

Bilah gulir khusus semakin populer saat ini, dan saya sangat tertarik untuk mempelajarinya. Ada berbagai alasan mengapa menyesuaikan scrollbar. Misalnya, scrollbar default dapat membuat UI aplikasi terlihat tidak konsisten di beberapa sistem operasi, dan di sini kita bisa mendapatkan keuntungan dari memiliki gaya terpadu

Saya selalu tertarik untuk mempelajari cara menyesuaikan bilah gulir di CSS, tetapi tidak mendapatkan kesempatan untuk melakukannya. Pada artikel ini, saya akan mengambil kesempatan dan belajar tentang mereka dan mendokumentasikan perjalanan ini

pengantar

Hal pertama yang ingin saya jelaskan adalah komponen atau bagian dari scrollbar. Bilah gulir berisi trek dan ibu jari. Berikut adalah visual yang menunjukkan mereka

Trek adalah dasar bilah gulir, di mana ibu jari adalah apa yang diseret pengguna untuk menggulir di dalam halaman atau bagian

Ada satu hal penting yang perlu diingat bahwa scrollbar dapat bekerja secara horizontal atau vertikal, tergantung pada desainnya. Juga, itu dapat berubah saat bekerja di situs web multibahasa yang bekerja di kedua arah kiri-ke-kanan (LTR) dan kanan-ke-kiri (RTL)

Menyesuaikan desain scrollbar

Memiliki bilah gulir khusus dulu hanya untuk webkit sehingga Firefox dan IE keluar dari permainan. Kami memiliki sintaks baru yang hanya berfungsi di Firefox dan akan mempermudah kami jika didukung penuh. Saya akan membahas sintaks Webkit lama, lalu yang baru

Sintaks lama

Lebar bilah gulir

Pertama, kita perlu menentukan ukuran scrollbar. Ini bisa berupa lebar untuk scrollbar vertikal, dan tinggi untuk scrollbar horizontal

.section::-webkit-scrollbar {
  width: 10px;
}

Dengan set itu, kita bisa menata scrollbar itu sendiri

Trek bilah gulir

Ini merupakan dasar dari scrollbar. Kita bisa menatanya dengan menambahkan warna latar belakang, bayangan, border-radius, dan border

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

_

Jempol bilah gulir

Setelah kita menyiapkan dasar scrollbar, kita perlu memberi style pada scrollbar thumb. Itu penting karena pengguna dapat menyeret ibu jari ini untuk berinteraksi dengan bilah gulir

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

Dengan itu, kami telah membahas cara lama menata bilah gulir khusus di CSS. Mari jelajahi sintaks baru

Sintaks baru

Lebar bilah gulir

Seperti yang dikatakan, ini menentukan lebar bilah gulir dan nilai yang paling kami pedulikan adalah

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

9 dan

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

0. Sayangnya, kami tidak dapat menentukan nomor tertentu seperti di sintaks webkit

.section {
  scrollbar-width: thin;
}

_

Warna bilah gulir

Dengan properti ini, kita dapat menentukan warna untuk track scrollbar dan jempol sebagai nilai pasangan

.section {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

_

Sesederhana sintaks baru ini, tetapi terbatas. Kami hanya dapat menerapkan warna solid. Kami tidak dapat menambahkan bayangan, gradien, tepi bulat, atau semacamnya. Yang boleh kami sesuaikan hanyalah warna

Talang scrollbar

Pernahkah Anda bertanya-tanya tentang bagaimana kami dapat menghindari perubahan tata letak saat konten tumbuh dalam wadah bergulir?

.box {
  padding: 1rem;
  max-height: 220px;
  overflow-y: auto;
}

Kami memiliki wadah dengan bantalan

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

_1 di semua sisi. Hingga saat ini, kontennya pendek dan bilah gulir tidak ditampilkan karena

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

2 digunakan (Pengingat ramah. ketika

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

_9 digunakan untuk

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

4, itu tidak akan menampilkan bilah gulir sampai kontennya panjang)

Saat konten bertambah, bilah gulir akan ditampilkan dan dengan demikian ruang yang tersedia untuk konten akan berkurang

Perhatikan bagaimana konten bergeser saat ada scrollbar. Itu karena browser harus menyediakan ruang untuk scrollbar

Untungnya, ini dapat diselesaikan sekarang dengan

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

5 (didukung di browser berbasis Chromium, v94+). Ini bekerja dengan cara yang memungkinkan kami memesan ruang terlebih dahulu. Nilai default adalah

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

_9, dan nilai lainnya adalah

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

7. Perlu juga disebutkan bahwa ada nilai opsional

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

8 yang menunjukkan selokan di kedua sisi

.box {
  padding: 1rem;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

Dengan begitu, saat konten bertambah, tidak akan bergeser karena browser sudah menyediakan ruang untuk itu. Berikut adalah visual yang menunjukkan dua kasus (Konten pendek vs konten panjang)

Agar lebih jelas, saya mengerjakan demo interaktif yang menunjukkan bagaimana selokan ditambahkan ke wadah

Lihat Pen Scrollbar Gutter - Demo oleh Ahmad Shadeed (@shadeed) di CodePen

Menentukan ruang lingkup bilah gulir khusus

Hal penting yang perlu diketahui adalah di mana menyesuaikan bilah gulir. Apakah Anda ingin gayanya generik dan berfungsi untuk semua scrollbar di situs web?

Dengan sintaks lama, kita dapat menulis pemilih tanpa melampirkannya ke suatu elemen, dan mereka akan diterapkan ke semua elemen yang dapat digulir

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: darkgrey;
}

::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

Namun, jika Anda ingin menerapkan bagian tertentu saja, Anda perlu menambahkan elemen sebelum pemilih

.section::-webkit-scrollbar {
  width: 10px;
}

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

Untuk sintaks yang baru hampir sama. Hal yang saya perhatikan adalah jika Anda menginginkan gaya generik, itu harus diterapkan pada elemen

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

9, bukan

.section {
  scrollbar-width: thin;
}

0

html {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

Saya mencoba menambahkan di atas untuk

.section {
  scrollbar-width: thin;
}

_0 tetapi tidak berfungsi seperti yang diharapkan

Sekarang setelah kita mengetahui cara kerja sintaks lama dan baru, mari kita menyesuaikan beberapa desain scrollbar

Menyesuaikan desain scrollbar

Contoh 1

Sebelum mulai menyesuaikan bilah gulir, ada baiknya berbicara tentang gaya default di Mac OS. Begini tampilannya

• Trek scrollbar memiliki batas di sisi kiri dan kanan, dengan warna latar belakang yang solid
• Jempol scrollbar dibulatkan dan dengan ruang di sekitarnya dari sisi kiri dan kanan

Untuk windows, ini sedikit berbeda

Inilah cara kami menyesuaikan bilah gulir berdasarkan mockup di atas

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

_0

Menambahkan

.section {
  scrollbar-width: thin;
}

_2 untuk track dan jempol diperlukan, karena tidak akan berfungsi pada

.section {
  scrollbar-width: thin;
}

3

Dengan sintaks baru, kami tidak dapat menyesuaikan

.section {
  scrollbar-width: thin;
}

4 bilah gulir, dan yang hanya mungkin adalah mengubah warna latar trek dan ibu jari

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

_1

Catatan. contoh berikutnya hanya berfungsi dengan sintaks

.section {
  scrollbar-width: thin;
}

5. Untuk proyek kehidupan nyata, Anda dapat menambahkan

.section {
  scrollbar-width: thin;
}

5 dan sintaks baru

Contoh 2

Untuk contoh ini, desainnya sedikit lebih berat karena mengandung gradien dan bayangan. Apakah itu bisa dilakukan? . Mari kita lihat caranya

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

_2

Lihat Pen Custom Scrollbar - 2 oleh Ahmad Shadeed (@shadeed) di CodePen

Contoh 3

Kami juga dapat menambahkan batas ke ibu jari dan trek, yang dapat membantu kami dengan beberapa desain yang rumit

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

_3

Berdasarkan contoh yang sama, kita dapat mengatur ulang batas atas dan bawah ke

.section {
  scrollbar-width: thin;
}

7 dan mendapatkan efek yang menarik untuk ibu jari. Perhatikan elemen-elemen kecil di bagian atas dan bawah ibu jari

Lihat Pen Custom Scrollbar - 3 oleh Ahmad Shadeed (@shadeed) di CodePen

Contoh 4

Dalam contoh ini, kami ingin ibu jari scrollbar memiliki offset dari semua sisi. Karena tidak mungkin untuk menggunakan

.section {
  scrollbar-width: thin;
}

_8 dengan properti scrollbar, kami memerlukan peretasan untuk menggunakan batas CSS dan

.section {
  scrollbar-width: thin;
}

9. Saya belajar tentang ide ini dari artikel hebat ini oleh Gabriel Romualdo

Secara default, ketika sebuah elemen memiliki latar belakang dan batas, browser akan memotong

.section {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

0

Perhatikan contoh berikut

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

_4

Kami memiliki tombol dengan batas hitam

.section {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

_1. Itu tidak memiliki bantalan untuk menjelaskan konsepnya. Misalkan

.section {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

_2 diatur ke

.section {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

0, batas akan disertakan dalam ukuran tombol. Akibatnya, perbatasan muncul di atas latar belakang

Sekarang, saat kami menerapkan

.section {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

4, latar belakang hanya akan muncul di sekitar konten

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

_5

Saya harap idenya jelas. Mari kita kembali ke jempol scrollbar. Untuk meniru efeknya, kita perlu menambahkan yang berikut ini

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

_6

Dan kita sudah selesai

Lihat Pen Custom Scrollbar - 4 oleh Ahmad Shadeed (@shadeed) di CodePen

Dengan itu, kami telah menjelajahi cara menyesuaikan desain bilah gulir yang berbeda. Untuk Firefox, kita dapat menggunakan sintaks baru tetapi sekali lagi, itu hanya terbatas pada ketebalan dan warna solid

Bisakah kita menambahkan efek hover?

Ya, kita bisa menambahkan efek hover ke jempol scrollbar untuk sintaks lama dan baru

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

_7

Dengan sintaks baru, kita bisa menambahkan transisi, sedangkan dengan yang lama, kita tidak bisa. Ini bukan masalah besar bagi saya

Tampilkan bilah gulir saat dibutuhkan

Membuat elemen yang dapat digulir dimungkinkan dengan menambahkan nilai selain

.section {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

5 ke properti

.section {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

6. Disarankan untuk menggunakan kata kunci

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

_9 karena hanya akan menampilkan scrollbar jika konten melebihi wadahnya

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

_8

Masalah aksesibilitas

Saat menyesuaikan desain scrollbar, harap diingat untuk memiliki kontras yang baik antara ibu jari dan trek, sehingga mudah diperhatikan oleh pengguna

Pertimbangkan contoh "buruk" berikut untuk bilah gulir khusus

Warna ibu jari hampir tidak terlihat. Ini tidak baik untuk pengguna karena akan mempersulit jika digunakan untuk menggulir melalui ibu jari

Bagaimana cara memperbaiki bilah gulir vertikal di HTML?

Bagaimana cara mendapatkan bilah gulir vertikal?

Bagaimana Anda menggunakan bilah gulir vertikal?

Bagaimana cara membuat halaman yang dapat digulir dalam HTML?