Menyembunyikan Scroll Bar dengan CSS, namun Tetap Mempertahankan Fungsi Scroll
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 */
}
40 Comments:
kayak footer 3kolom ane mas, udah pemikiran saya dulu hohaha :Q
http://underground404.blogspot.com/
By Putra, at Tuesday, May 1, 2012 at 3:03:00 PM GMT+7
kalau di pasang di tempe bisa gak gan?
By Rizky Wardiansyah, at Tuesday, May 1, 2012 at 3:08:00 PM GMT+7
This comment has been removed by the author.
By Muhammad Irham, at Tuesday, May 1, 2012 at 5:25:00 PM GMT+7
This comment has been removed by the author.
By Muhammad Irham, at Tuesday, May 1, 2012 at 5:29:00 PM GMT+7
gan kalo mau di tempatin di blog archive gimana gan ??? :\
By Muhammad Irham, at Tuesday, May 1, 2012 at 5:36:00 PM GMT+7
Boleh juga tekniknya nih...
Kalo saya dengan teknik hover...hehehe
Jadi bakalan tauk kalo disana ada scroll order.
By Beben Koben, at Tuesday, May 1, 2012 at 9:30:00 PM GMT+7
@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:
By Taufik Nurrohman, at Tuesday, May 1, 2012 at 10:17:00 PM GMT+7
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
By Muhammad Irham, at Wednesday, May 2, 2012 at 9:22:00 AM GMT+7
kode akhirnya komen diatas kodenya ngk nampak maap
By Muhammad Irham, at Wednesday, May 2, 2012 at 9:25:00 AM GMT+7
@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 + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<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/
By Taufik Nurrohman, at Wednesday, May 2, 2012 at 10:03:00 AM GMT+7
@Taufik Nurrohman Kalau semisal kelas nya diganti pake .widget-content{ di blog saya jadi itu mas :D
By Putra, at Wednesday, May 2, 2012 at 3:01:00 PM GMT+7
tetap ngak bisa :'(
By Muhammad Irham, at Wednesday, May 2, 2012 at 5:03:00 PM GMT+7
keren mas..., besok2 mgkn akan sy coba..., makasih ya... \o/
By Rohis Facebook, at Wednesday, May 2, 2012 at 6:08:00 PM GMT+7
hahaha akhirnya bisa 0:)
By Muhammad Irham, at Thursday, May 3, 2012 at 2:43:00 PM GMT+7
ijin ncopy kodenya yak
By Muhammad Irham, at Monday, May 21, 2012 at 4:05:00 PM GMT+7
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/
By Anonymous, at Friday, June 15, 2012 at 4:58:00 PM GMT+7
@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?
By Anonymous, at Friday, June 15, 2012 at 5:12:00 PM GMT+7
@The7Bloggers Mas caranya untuk menyembunyikan scroll buat iframe gimana? Seperti pada gambar di bawah ini:
http://3.bp.blogspot.com/-hmP4saK4L0c/T9sQbHJbZ9I/AAAAAAAAAD8/AloE0hkgFdc/s320/top.png
Apa caranya seperti ini:
iframe#komentar{
margin:15px -300px 15px 15px;
padding-right:300px;
}
Tapi tadi aku coba dengan kode itu kok ndak bisa?
By Anonymous, at Friday, June 15, 2012 at 5:50:00 PM GMT+7
@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
By Taufik Nurrohman, at Friday, June 15, 2012 at 6:05:00 PM GMT+7
@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 =(
By Taufik Nurrohman, at Friday, June 15, 2012 at 6:09:00 PM GMT+7
mantap mas, sudah dicoba dan berhasil,
ijin copy scriptnya ya mas
makasih
:-bd
By Anonymous, at Tuesday, June 19, 2012 at 3:10:00 PM GMT+7
wah setuju, minimal kt tau dasar2 kode html nya yah.. wekeke dan minimal kita udah mencoba dan kalo mentok baru bertanya :D
By Surga Kenari, at Thursday, July 12, 2012 at 9:35:00 PM GMT+7
mas, kalau menghilangkan scrollbar di homepage saja gimana?
By Unknown, at Tuesday, November 13, 2012 at 6:02:00 PM GMT+7
⇒ /2011/08/tag-kondisional-tingkat-lanjut.html
By Taufik Nurrohman, at Tuesday, November 13, 2012 at 7:17:00 PM GMT+7
trus gimana cara menerapkan? maksudku bukan pada widget, tapi pada scrollbar yang di samping layar
By Unknown, at Tuesday, November 13, 2012 at 8:57:00 PM GMT+7
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
html, body {overflow:hidden}
</style>
</b:if>
By Taufik Nurrohman, at Tuesday, November 13, 2012 at 10:27:00 PM GMT+7
makasih banyak mas.! sy baru aja memakainya :-bd
By Rohis Facebook, at Friday, November 30, 2012 at 7:08:00 PM GMT+7
maaf pak, gmn caranya kalau saya ingin pasang pada widget popular post atw pd widget-widget lainnya.., terima kasih....
By Lentera Langit, at Friday, January 25, 2013 at 8:20:00 PM GMT+7
Mampir ke blognya mas-mas yang sudah ngerti di atas, terus kenalan. Abis itu tanya :)
By Taufik Nurrohman, at Saturday, January 26, 2013 at 7:12:00 PM GMT+7
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 :)
http://ximg.us/upload/1360069580.png
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.
By Anonymous, at Tuesday, February 5, 2013 at 8:08:00 PM GMT+7
coba tutorial di atas mas..!!
itu pada halam demonya ga ada scroll bar..
By azewBz, at Tuesday, February 5, 2013 at 8:21:00 PM GMT+7
Kalau scrollbar horizontal disembunyikan, terus nanti mau nggulung pakai apa?
By Taufik Nurrohman, at Wednesday, February 6, 2013 at 8:48:00 AM GMT+7
heheh , ia mas lupa atuh ,
masalahnya sudah saya benarkan ,
ternyata hanya dengan mengubah nilai overflow menjadi hidden ,
By Anonymous, at Wednesday, February 6, 2013 at 11:29:00 AM GMT+7
mas taufiq.., td aq baru liat trnyata klo dibuka digoogle crome scrol tetap muncul tp ko scrol yg dibawah (horisontal), itu napa ya??
By Rohis Facebook, at Friday, February 8, 2013 at 4:20:00 PM GMT+7
Scrollbar horizontal jangan disembunyikan. Nanti menggulungnya pakai apa?
By Taufik Nurrohman, at Saturday, February 9, 2013 at 1:49:00 PM GMT+7
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.
By Unknown, at Thursday, June 6, 2013 at 10:23:00 PM GMT+7
Cari kode ini. Ada di dalam widget Blog1:
<div style='overflow:auto; width:543px; height:1050px;'>
Kosongkan nilai style lalu simpan:
<div style=''>
By Taufik Nurrohman, at Friday, June 7, 2013 at 10:08:00 AM GMT+7
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...
By Unknown, at Friday, June 7, 2013 at 4:18:00 PM GMT+7
Yang ini lebih aksesibel ⇒ /2013/03/javascript-custom-vertical-scrollbar.html
By Taufik Nurrohman, at Saturday, November 2, 2013 at 10:07:00 PM GMT+7
Makasih mas bro, cse saya udah bisa. tanpa scroll bar.
By typhun, at Sunday, March 2, 2014 at 3:54:00 PM GMT+7
Post a Comment
<< Home