Custom Scroll Bar Dan Show Hide Scroll On Hover Dengan CSS

Custom Scroll Bar Dan Show Hide Scroll On Hover Dengan CSS

Bola Hero Gawai

Custom Scroll Bar Dan Show Hide Scroll On Hover Dengan CSS

Custom Scroll Bar Dan Show Hide Scroll On Hover
Kadang sebagian dari kita kurang puas dengan tampilan scroll bar bawaan browser yang kita gunakan. Untuk itu banyak yang memodifikasi tampilan scroll bar agar sesuai dengan selera dan tema blog. Salah satu cara untuk memodifikasi atau membuat custom scroll bar yang paling praktis adalah 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 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

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×