Untuk membuat custom scroll bar yang simple cukup menggunakan css di bawah ini.
::-webkit-scrollbar{width:8px;height:8px} /* tinggi dan lebar scroll bar */
::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:2px} /* jalur scroll bar */
::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out} /* thumb/pointer scroll bar */
::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
Dengan css di atas, maka semua tampilan scroll bar di blog akan berubah. Namun kita juga bisa membuat custom scroll bar hanya untuk target
div
tertentu saja seperti di bawah ini.
<div class="scroll-pane">
<p>
blah bleh bloh
</p>
<p>
blah bleh bloh
</p>
<p>
blah bleh bloh
</p>
<p>
blah bleh bloh
</p>
<p>
blah bleh bloh
</p>
</div>
Dengan css seperti ini:
.scroll-pane {
width: 300px;
height: 200px;
overflow: auto;
}
Maka untuk membuat custom scroll bar hanya untuk element tersebut, kita bisa menambahkan css di bawah ini.
.scroll-pane::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.scroll-pane::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, .1);
border-radius: 2px
}
.scroll-pane::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .6)
}
.scroll-pane::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: rgba(0, 0, 0, .4);
transition: all 400ms ease-in-out
}
Jika hanya ingin menampilkan scroll bar vertical, maka tinggal tambahkan kode
overflow-x;hidden
, untuk hanya menampilkan scroll bar horizontal tinggal tambahkan kode oveflow-y:hidden
, menjadi seperti ini.
.scroll-pane {
width: 300px;
height: 200px;
overflow: auto;
overflow-x;hidden;
}
DEMO
Akses dengan Chrome
Akses dengan Chrome
Kita juga bisa memodifikasi tampilan scroll bar dengan menghilangkan scroll bar dan menampilkannya ketika div tersebut di-hover mouse. Sebenarnya bukan menghilangkan scroll bar namun memanipulasi background dengan transparent agar tidak terlihat. Kemudian ketika div di-hover baru diberi background solid agar scroll bar terlihat.
/* dengan background transparent agar scroll bar tidak terlihat */
.scroll-pane::-webkit-scrollbar {
width: 8px
height: 8px
}
.scroll-pane::-webkit-scrollbar-track {
background-color:transparent;
border-radius: 2px
}
.scroll-pane::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: transparent;
transition: all 400ms ease-in-out
}
/* div di-hover dan scroll bar diberi background solid agar terlihat */
.scroll-pane:hover::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, .1);
border-radius: 2px
}
.scroll-pane:hover::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: rgba(0, 0, 0, .4);
transition: all 400ms ease-in-out
}
.scroll-pane:hover::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .6)
}
DEMO
Akses dengan Chrome
Akses dengan Chrome