Mecha versi 2.6.3 sudah dirilis!

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/

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

Unknown

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

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

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

Komentar telah ditutup.