Menyembunyikan Scroll Bar dengan CSS, namun Tetap Mempertahankan Fungsi Scroll

Selasa, 01 Mei 2012

Tabel Konten

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

Selasa, 01 Mei 2012 03:03 PM

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

Rizky Wardiansyah

Selasa, 01 Mei 2012 03:08 PM

kalau di pasang di tempe bisa gak gan?

Muhammad Irham

Selasa, 01 Mei 2012 05:25 PM

Komentar ini telah dihapus oleh pengarang.

Muhammad Irham

Selasa, 01 Mei 2012 05:29 PM

Komentar ini telah dihapus oleh pengarang.

Muhammad Irham

Selasa, 01 Mei 2012 05:36 PM

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

Beben Koben

Selasa, 01 Mei 2012 09:30 PM

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

Taufik Nurrohman

Selasa, 01 Mei 2012 10:17 PM

@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

Rabu, 02 Mei 2012 09:22 AM

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

Rabu, 02 Mei 2012 09:25 AM

kode akhirnya komen diatas kodenya ngk nampak maap

Taufik Nurrohman

Rabu, 02 Mei 2012 10:03 AM

@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

Rabu, 02 Mei 2012 03:01 PM

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

Muhammad Irham

Rabu, 02 Mei 2012 05:03 PM

tetap ngak bisa :'(

Unknown

Rabu, 02 Mei 2012 06:08 PM

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

Muhammad Irham

Kamis, 03 Mei 2012 02:43 PM

hahaha akhirnya bisa 0:)

Muhammad Irham

Senin, 21 Mei 2012 04:05 PM

ijin ncopy kodenya yak

Anonim

Jum’at, 15 Juni 2012 04:58 PM

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

Jum’at, 15 Juni 2012 05:12 PM

@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

Jum’at, 15 Juni 2012 05:50 PM

@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

Jum’at, 15 Juni 2012 06:05 PM

@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

Jum’at, 15 Juni 2012 06:09 PM

@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

Selasa, 19 Juni 2012 03:10 PM

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

Surga Kenari

Kamis, 12 Juli 2012 09:35 PM

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

Unknown

Selasa, 13 November 2012 06:02 PM

mas, kalau menghilangkan scrollbar di homepage saja gimana?

Taufik Nurrohman

Selasa, 13 November 2012 07:17 PM

⇒ /2011/08/tag-kondisional-tingkat-lanjut.html

Unknown

Selasa, 13 November 2012 08:57 PM

trus gimana cara menerapkan? maksudku bukan pada widget, tapi pada scrollbar yang di samping layar

Taufik Nurrohman

Selasa, 13 November 2012 10:27 PM

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
html, body {overflow:hidden}
</style>
</b:if>

Unknown

Jum’at, 30 November 2012 07:08 PM

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

Lentera Langit

Jum’at, 25 Januari 2013 08:20 PM

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

Taufik Nurrohman

Sabtu, 26 Januari 2013 07:12 PM

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

Anonim

Selasa, 05 Februari 2013 08:08 PM

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

Selasa, 05 Februari 2013 08:21 PM

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

Taufik Nurrohman

Rabu, 06 Februari 2013 08:48 AM

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

Anonim

Rabu, 06 Februari 2013 11:29 AM

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

Unknown

Jum’at, 08 Februari 2013 04:20 PM

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

Sabtu, 09 Februari 2013 01:49 PM

Scrollbar horizontal jangan disembunyikan. Nanti menggulungnya pakai apa?

Unknown

Kamis, 06 Juni 2013 10:23 PM

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

Jum’at, 07 Juni 2013 10:08 AM

Cari kode ini. Ada di dalam widget Blog1:

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

Kosongkan nilai style lalu simpan:

<div style=''>