Menyembunyikan Scroll Bar dengan CSS, namun Tetap Mempertahankan Fungsi Scroll

Tabel Konten
  1. HTML 
  2. CSS 
sidebar

Ini adalah teknik sederhana untuk menyembunyikan scrollbar tanpa membuat area menjadi tidak bisa digulung. Dengan mendeklarasikan margin negatif pada sisi kanan area, maka scrollbar secara otomatis akan tersembunyi jauh di sebelah kanan sana. Dan kita masih bisa menggulung area dengan mouse wheel atau... layar sentuh mungkin?

HTML 

<div class='hidden-scrollbar'>
    <div class='inner'>
      Teks atau sesuatu yang panjang di sini...
    </div>
</div>

CSS 

.hidden-scrollbar {
  background-color:black;
  border:2px solid #666;
  color:white;  
  overflow:hidden;
  text-align:justify;    
}

.hidden-scrollbar .inner {
  height:200px;
  overflow:auto;
  margin:15px -300px 15px 15px;
  padding-right:300px; /* Samakan dengan besar margin negatif */
}

Lihat Demo

42 Komentar

  • Putra

    kayak footer 3kolom ane mas, udah pemikiran saya dulu hohaha :Q
    http://underground404.blogspot.com/

  • Rizky Wardiansyah

    kalau di pasang di tempe bisa gak gan?

  • Muhammad Irham

    Komentar ini telah dihapus oleh pengarang.

  • Muhammad Irham

    Komentar ini telah dihapus oleh pengarang.

  • Muhammad Irham

    gan kalo mau di tempatin di blog archive gimana gan ??? :\

  • Beben Koben

    Boleh juga tekniknya nih...
    Kalo saya dengan teknik hover...hehehe
    Jadi bakalan tauk kalo disana ada scroll order.

  • Taufik Nurrohman

    @Muhammad Irham Susah gan... Ini harus memahami pengkodean HTML secara nalar dulu baru bisa menerapkan. Kalaupun mau dibuatkan tutorialnya buat agan sebenarnya sih bisa dengan mudah melakukanya gan, tapi tutorial copy & paste kode jelas-jelas tidak mendidik gan, jadi sabar saja ya gan, belajar dulu sampai terampil nanti biar bisa menemukan ide-ide baru tanpa harus mencari tutorialnya. Sukses gan... :-bd :cendol:

    • Muhammad Irham

      gan tapi kok pada blog underground404 bisa diterapin tutor gitu?, sumpah padahal ane udah coba, ane selipin tu kode pada kode awal widget blog archive dan ane tutup kode tsb pada tpi masih ttp ngk bisa.... :bingung

    • Muhammad Irham

      kode akhirnya komen diatas kodenya ngk nampak maap

  • Taufik Nurrohman

    @Muhammad Irham Ane nyoba nggak nambahin elemen apa-apa gan, cuma nambahin kelas scroll-bar tersembunyi seperti tersebut di atas ke dalam elemen arsip yang sudah ada. Begini gan:

    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content hidden-scrollbar'>
    <div id='ArchiveList' class='inner'>
    <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
    <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
    <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
    <b:include data='data' name='menu'/>
    </b:if>
    </div>
    </div>
    <b:include name='quickedit'/>
    </div>
    </b:includable>

    Saya nambahin kelas hidden-scrollbar dan inner doang gan, nggak perlu susah-susah deh kayaknya.

    Demo: http://jsfiddle.net/tovic/cWTRk/

  • Putra

    @Taufik Nurrohman Kalau semisal kelas nya diganti pake .widget-content{ di blog saya jadi itu mas :D

  • Muhammad Irham

    tetap ngak bisa :'(

  • Unknown

    keren mas..., besok2 mgkn akan sy coba..., makasih ya... \o/

  • Muhammad Irham

    hahaha akhirnya bisa 0:)

  • Muhammad Irham

    ijin ncopy kodenya yak

  • Anonim

    Ternyata kode utamanya terdapat di sini:

    
    margin:15px -300px 15px 15px;
    padding-right:300px;
    

    Saya tadi coba terapin di tag <body>, wkwkwkwk hasilnya malah kagak karuan mas? :) \o/

  • Anonim

    @The7Bloggers Mas tadi saya blogwalking dan menemukan di salah satu blog tutorial "jQuery Accordion Menu" ada yang tanya seperti ini:

    "Gan gimana caranya supaya jika kita klik bisa menutup semuanya?"

    Mumupung ada fitur threadednya, jadi saya jawab mas pertanyaan tersebut seperti ini:

    Pakai kode ini jah:

    
    Pakek ini mas:
    
    Kerangka script:
    
    <script type='text/javascript'>
    $(function(){
    $('.quote2,.quote3,.quote4').hide();
    $('.open1').click(function(){
    $('.quote').slideToggle('slow');
    $('.quote2,.quote3,.quote4').slideUp('slow');
    return false;
    });
    $('.open2').click(function(){
    $('.quote2').slideToggle('slow');
    $('.quote,.quote3,.quote4').slideUp('slow');
    return false;
    });
    $('.open3').click(function(){
    $('.quote3').slideToggle('slow');
    $('.quote,.quote2,.quote4').slideUp('slow');
    return false;
    });
    $('.open4').click(function(){
    $('.quote4').slideToggle('slow');
    $('.quote,.quote2,.quote3').slideUp('slow');
    return false;
    });
    });
    </script>
    
    Kerangka HTML:
    
    <div class='open1'><a href='#'>Tombol Akordion</a></div>
    <div class='quote'>
    TULISAN ANDA DI SINI
    </div>
    <div class='open2'><a href='#'>Tombol Akordion</a></div>
    <div class='quote2'>
    TULISAN ANDA DI SINI
    </div>
    <div class='open3'><a href='#'>Tombol Akordion</a></div>
    <div class='quote3'>
    TULISAN ANDA DI SINI
    </div>
    <div class='open4'><a href='#'>Tombol Akordion</a></div>
    <div class='quote4'>
    TULISAN ANDA DI SINI
    </div>
    
    Kerangka CSS:
    
    .open1 a,.open2 a,.open3 a,.open4 a{
    padding:7px;
    text-align:center;
    border-radius:7px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    -o-border-radius:7px;
    -ms-border-radius:7px;
    background:#39F;
    background-image:linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,254,0));
    background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,254,0));
    background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,254,0));
    background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,254,0));
    background-image:-ms-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,254,0));
    }
    .quote,.quote2,.quote3,.quote4{
    display:block;
    font-weight:normal;
    position:relative;
    background-color:#EEE;
    color:#111;
    border-radius:5px;
    text-shadow:0 1px 0 rgba(0,0,0,0.2);
    margin:.75em 0;
    padding:15px 20px;
    border:3px solid blue;
    }
    .quote:before,.quote2:before,.quote3:before,.quote4:before {
    content:"";
    width:0;
    height:0;
    position:absolute;
    bottom:100%;
    right:400px;
    border-color:transparent transparent blue;
    border-style:solid;
    border-width:12px;
    }
    .quote:after,.quote2:after,.quote3:after,.quote4:after {
    content:"";
    width:0;
    height:0;
    position:absolute;
    bottom:100%;
    right:405px;
    border-color:transparent transparent #EEE;
    border-style:solid;
    border-width:7px;
    }
    

    Terus yang saya tanyakan pada anda sekarang, apakah kode yang saya tulis di atas termasuk dalam kategori Accordion?

  • Anonim

    @The7Bloggers Mas caranya untuk menyembunyikan scroll buat iframe gimana? Seperti pada gambar di bawah ini:

    Apa caranya seperti ini:

    iframe#komentar{
    margin:15px -300px 15px 15px;
    padding-right:300px;
    }

    Tapi tadi aku coba dengan kode itu kok ndak bisa?

  • Taufik Nurrohman

    @The7Bloggers Iya, tapi ini masuk dalam kategori sulit karena setiap panel harus memiliki kelasnya sendiri-sendiri. Saya belum lama ini membuat plugin Accordion di sini
    Saya coba memodifikasinya supaya jika tombol panel yang terbuka diklik lagi maka panel tersebut bisa menutup ⇒ http://jsfiddle.net/tovic/EDQn9/2/

    Kuncinya ada pada kondisi ini:

    if ($(this).next().is(':hidden')) {
    $(this).addClass('active').next().slideDown(settings.sDownSpeed, settings.sDownEasing);
    } else {
    $(this).removeClass('active').next().slideUp(settings.sDownSpeed, settings.sDownEasing);
    }

    Jika panel di bawahnya terbuka, maka saat tombol akordion diklik dia akan memicu penutupan panel, tapi jika sebaliknya, maka tombol akan memicu pembukaan panel :W

  • Taufik Nurrohman

    @The7Bloggers Kasih saja pembungkus baru di luar iframe supaya markupnya bisa menjadi seperti di atas. Tapi Saya tidak pernah menyarankan itu. Percuma scroll bar hilang jika ternyata memang sangat diperlukan =(

  • Anonim

    mantap mas, sudah dicoba dan berhasil,
    ijin copy scriptnya ya mas
    makasih
    :-bd

  • Surga Kenari

    wah setuju, minimal kt tau dasar2 kode html nya yah.. wekeke dan minimal kita udah mencoba dan kalo mentok baru bertanya :D

  • Unknown

    mas, kalau menghilangkan scrollbar di homepage saja gimana?

  • Unknown

    makasih banyak mas.! sy baru aja memakainya :-bd

  • Lentera Langit

    maaf pak, gmn caranya kalau saya ingin pasang pada widget popular post atw pd widget-widget lainnya.., terima kasih....

    • Taufik Nurrohman

      Mampir ke blognya mas-mas yang sudah ngerti di atas, terus kenalan. Abis itu tanya :)

  • Anonim

    permisi mas taufik, pengen tanya juga seputar scroll bar juga,

    begini mas ,
    saya ingin menerapakan ini untuk menghilangkan scroll bar di bagian blockquote postingan saya mas ,
    berikut Screnshotnya :)

    kira kira bagaimana cara memebernarkan masalah ini,
    atau langsung aja ke tkp mas :)

    http://theoryrizky.blogspot.com/2013/01/Interactive-Photo-Gallery-With-JQUERY-CSS.html

    Sekian , Dan Kiranya Ada kata" yang salah mohon dimaklumi.

    • azewBz

      coba tutorial di atas mas..!!
      itu pada halam demonya ga ada scroll bar..

    • Taufik Nurrohman

      Kalau scrollbar horizontal disembunyikan, terus nanti mau nggulung pakai apa?

      • Anonim

        heheh , ia mas lupa atuh ,
        masalahnya sudah saya benarkan ,
        ternyata hanya dengan mengubah nilai overflow menjadi hidden ,

  • Unknown

    mas taufiq.., td aq baru liat trnyata klo dibuka digoogle crome scrol tetap muncul tp ko scrol yg dibawah (horisontal), itu napa ya??

    • Taufik Nurrohman

      Scrollbar horizontal jangan disembunyikan. Nanti menggulungnya pakai apa?

  • Unknown

    mau tanya nih mas, saya membuat scroll bar pada halaman posting, saya menerapkan itu setelah melihat halaman facebook, dengan maksud untuk memasukan 10 judul posting tanpa menambah tinggi/panjang template, saya sudah mencoba untuk menghilangkan scrollbar itu, tapi hasilnya malah gx karu-karuan, tolong di bantu ya mas..contohnya mas bisa lihat di blog saya http://rt6cbr.blogspot.com ... terima kasih.

    • Taufik Nurrohman

      Cari kode ini. Ada di dalam widget Blog1:

      <div style='overflow:auto; width:543px; height:1050px;'>

      Kosongkan nilai style lalu simpan:

      <div style=''>
      • Unknown

        mohon maaf mas,,saya salah mengajukan pertanyaan,,maksud saya bukan menghilangkan,,tapi menyembunyikan scrollbar,,namun fungsi dari scrollbar itu masih tetap ada,,sekali lagi mohon maaf,,terima kasih atas bantuannya...

  • Unknown

    praktek yg ini untuk di http://downloadsatujari.blogspot.com/2013/10/Download-eBook-Nyai-Ratu-Kidul-Hanya-Rekayasa-Politik.html?showComment=1383399525521#c6501952547223641704 ah :D

  • Unknown

    Makasih mas bro, cse saya udah bisa. tanpa scroll bar.

Komentar telah ditutup.