Cara menggunakan modern scrollbar css

Secara default, scroll bar akan tersembunyi secara otomatis pada semua element Windows 10 seperti Start Menu, Settings, Microsoft Store, dll. Untuk memunculkannya, kamu harus mengarahkan pointer mouse kearah dimana scroll bar berada.

 Live Tanya Jawab Windows 11: Ngobrol Bareng Windows 11 Yuk

Hal ini dirasa cukup mengganggu, karena pada dasarnya scroll bar hanya akan muncul ketika kira berinteraksi dengannya. Untungnya, Microsoft memberikan opsi agar scroll bar selalu terlihat meskipun fokus sudah beralih kearea lain.

Baca juga tutorial Windows 10 lainnya:

• Cara Berpindah Tema di Windows 10 secara Otomatis dengan Script
• Cara Mengunci Taskbar dengan Registry Editor
• Cara Menjalankan Program as Administrator dari Run
• Cara Convert FAT32 ke NTFS tanpa Kehilangan Data
• Cara Menginstal Group Policy Editor di Windows 10 Home
• Memahami Penamaan dalam File ISO Windows
• Cara Memperbaiki Master Boot Record (MBR) di Windows 10

Membuat Scroll Bar Selalu Terlihat di Windows 10

1. Buka Settings.
2. Navigasi ke Ease of Access > Display.
3. Pada panel kanan swipe ke kiri pada opsi Automatically hide scroll bars in Windows.
4. Done.

Setelah proses selesai, maka scroll bar akan tetap muncul pada semua elemen di Windows 10 (untuk modern apps lebih tepatnya).

Kamu bisa melakukan langkah-langkah yang sama seperti diatas untuk mengembalikan pengaturan seperti semula.

  ⚡️ 3 JUTAAN! 7 Alasan Kenapa Beli OPPO A76 (Review)  

SUBSCRIBE CHANNEL KEPOIN TEKNO

NB: Subscribe channel Kepoin Tekno agar tidak ketinggalan berbagai info menarik dan bermanfaat seputar teknologi, setiap hari.

Artikel sebelumnyaCara Mematikan Touch Screen di Windows 10 dengan Registry Editor

Artikel selanjutnyaCara Membuat Scroll Bar Selalu Terlihat di Windows 10 dengan Registry Editor

Aditya Rizky

Microsoft Device and Windows beta enthusiast. akan merasa senang jika bisa saling bertukar knowledge tentang Windows dan Lumia, baik Melalui Forum atau Twitter. Bukan fanboy.

Custom Scrollbar dengan CSS dan Webkit – Hallo semuanya, pasti kalian pernah melihat sebuah website yang memiliki scrollbar dengan bentuk atau warna yang berbeda, tahukah kalian bahwa css sendiri juga secara default memiliki property yang bisa kalian gunakan untuk mengubah tampilan dari scriollbar.

Berikut ini adalah daftar property yang bisa kalian gunakan dengan webkit.

• ::-webkit-scrollbar – Memili scrollbar
• ::-webkit-scrollbar-button – Memilih tombol scroll
• ::-webkit-scrollbar-thumb – Memilih handle scroll
• ::-webkit-scrollbar-track – Memilih progress bar pada scroll
• ::-webkit-scrollbar-track-piece – Memilih progress bar pada scroll tanpa handle
• ::-webkit-scrollbar-corner – Memilih sudut scroll bar
• ::-webkit-resizer – Memilih.handle resize

Sekarang kita akan coba praktek dengan menggunakan html seperti berikut

   

Hallo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.

Selanjutnya kita berikan css default seperti berikut.

article{
    background: lightgreen;
    overflow-y:scroll;
    height: 200px;
    width: 300px
}

Jika sudah, maka kita akan coba memberikan custom scrollbar dengan css seperti berikut

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

Dengan begitu scrollbar akan berubah menjadi seperti ini

Sebagai catatan, custom scrollbar dengan webkit css ini hanya berlaku untuk browser berbasis webkit seperti Google Chrome, dan Safari, untuk Firefox tidak akan berjalan.

Baiklah teman-teman demikian artikel kali ini, yang membahas tentang cara membuat custom scroll dengan CSS dan Webkit. Semoga bermanfaat