Di bawah ini kita akan mempelajari cara menyembunyikan scrollbar dengan CSS.
<!DOCTYPE html> <html> <head> <style> body { height: 2500px; /* buatlah site ini sangat panjang */ width: 2500px; /* buatlah site ini sangat lebar */ overflow: hidden; /* Hide scrollbars */ } </style> </head> <body> <h2>Hide scrollbars</h2> <p> Contoh ini akan menyembunyikan scrollbar (dan fungsinya - tidak mungkin untuk menggulir di dalam halaman). </p> <p> Coba hapus <strong> overflow: hidden; </strong> untuk melihat efeknya. </p> </body> </html>
Cara Menyembunyikan Scrollbar
Tambahkan overflow: hidden; untuk menyembunyikan scrollbar horizontal dan vertikal.
Contoh
body {
overflow: hidden; /* Hide scrollbars */
}Untuk hanya menyembunyikan scrollbar vertikal, atau hanya scrollbar horizontal, gunakan overflow-y atau overflow-x:
Contoh
body {
overflow-y: hidden; /* Sembunyikan vertical scrollbar */
overflow-x: hidden; /* Sembunyikan horizontal scrollbar */
}<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 2500px; /* buatlah site ini sangat panjang */
width: 2500px; /* buatlah site ini sangat lebar */
overflow-y: hidden; /* Sembunyikan vertical scrollbar */
overflow-x: hidden; /* Sembunyikan horizontal scrollbar */
}
</style>
</head>
<body>
<h2>Hide scrollbars</h2>
<p>Contoh ini akan menyembunyikan scrollbar (dan fungsinya - tidak mungkin untuk menggulir di dalam halaman). </p>
<p> Coba hapus satu atau kedua properti <strong> overflow nya </strong> untuk melihat efeknya.</p>
</body>
</html>
Perhatikan bahwa overflow: hidden juga akan menghapus fungsionalitas scrollbar. Tidak mungkin untuk menggulir ke dalam halaman.
Sembunyikan Scrollbar Tapi Pertahankan Fungsi
Untuk menyembunyikan scrollbar, namun tetap dapat terus melakukan scroll, kita dapat menggunakan kode berikut:
Contoh
/* Sembunyikan scrollbar dari Chrome, Safari dan Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Sembunyikan scrollbar untuk IE, Edge dan Firefox */
.example {
-ms-overflow-style: none; /* IE dan Edge */
scrollbar-width: none; /* Firefox */
}<!DOCTYPE html>
<html>
<head>
<style>
.example {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow-y: scroll; /* Tambahkan kemampuan untuk melakukan scrolling */
}
/* Sembunyikan scrollbar dari Chrome, Safari dan Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Sembunyikan scrollbar untuk IE, Edge dan Firefox */
.example {
-ms-overflow-style: none; /* IE dan Edge */
scrollbar-width: none; /* Firefox */
}
</style>
</head>
<body>
<h2>Hide scrollbar but keep functionality</h2>
<p>Coba scroll ke dalam div di bawah ini:</p>
<div class="example">Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. </div>
</body>
</html>
Browser Webkit, seperti Chrome, Safari, dan Opera, mendukung elemen pseudo ::-webkit-scrollbar non-standar, yang memungkinkan kita mengubah tampilan scrollbar browser. IE dan Edge mendukung properti -ms-overflow-style:, dan Firefox mendukung properti scrollbar-width, yang memungkinkan kita untuk menyembunyikan scrollbar, tetapi tetap mempertahankan fungsionalitasnya.
