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 */
}
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:
Saya nambahin kelas
hidden-scrollbar
daninner
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 :DMuhammad 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:
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:
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:
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?
Taufik Nurrohman
⇒ /2011/08/tag-kondisional-tingkat-lanjut.html
Unknown
trus gimana cara menerapkan? maksudku bukan pada widget, tapi pada scrollbar yang di samping layar
Taufik Nurrohman
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:
Kosongkan nilai
style
lalu simpan: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
Taufik Nurrohman
Yang ini lebih aksesibel ⇒ /2013/03/javascript-custom-vertical-scrollbar.html
Unknown
wah sip kang meluncur... yg tadi di delete berarti :D
Unknown
Makasih mas bro, cse saya udah bisa. tanpa scroll bar.