Custom Scroll Kafetaria Dan Show Hide Scroll On Hover Dengan Css

Kadang sebagian dari kita kurang puas dengan tampilan scroll kafetaria bawaan browser yang kita gunakan. Untuk itu banyak yang memodifikasi tampilan scroll kafetaria semoga sesuai dengan selera dan tema blog. Salah satu cara untuk memodifikasi atau menciptakan custom scroll kafetaria yang paling mudah yaitu dengan css webkit. Namun perlu diketahui bahwa css webkit hanya berlaku pada Chrome dan Safari, sedangkan untuk Firefox dan Internet Explorer belum mendukung css webkit ini.

Untuk menciptakan custom scroll kafetaria yang simple cukup memakai css di bawah ini.

 ::-webkit-scrollbar{width:8px;height:8px} /* tinggi dan lebar scroll kafetaria */
 ::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:2px} /* jalur scroll kafetaria */
 ::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out} /* thumb/pointer scroll kafetaria */
 ::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}

Dengan css di atas, maka semua tampilan scroll kafetaria di blog akan berubah. Namun kita juga dapat menciptakan custom scroll kafetaria hanya untuk sasaran div tertentu saja menyerupai 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 menyerupai ini:

 .scroll-pane {
   width: 300px;
   height: 200px;
   overflow: auto;
 }

Maka untuk menciptakan custom scroll kafetaria hanya untuk element tersebut, kita dapat 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 kafetaria vertical, maka tinggal tambahkan aba-aba overflow-x;hidden, untuk hanya menampilkan scroll kafetaria horizontal tinggal tambahkan aba-aba oveflow-y:hidden, menjadi menyerupai ini.

 .scroll-pane {
   width: 300px;
   height: 200px;
   overflow: auto;
   overflow-x;hidden;
 }

DEMO
Akses dengan Chrome

Kita juga dapat memodifikasi tampilan scroll kafetaria dengan menghilangkan scroll kafetaria dan menampilkannya dikala div tersebut di-hover mouse. Sebenarnya bukan menghilangkan scroll kafetaria namun memanipulasi background dengan transparent semoga tidak terlihat. Kemudian dikala div di-hover gres diberi background solid semoga scroll kafetaria terlihat.

 /* dengan background transparent semoga scroll kafetaria 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 kafetaria diberi background solid semoga 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

Sumber https://www.kompiajaib.com/

Share this post