Jawaban:
Tetapkan overflow: hidden;
pada tag tubuh seperti ini:
<style type="text/css">
body {
overflow: hidden;
}
</style>
Kode di atas menyembunyikan bilah gulir horizontal dan vertikal.
Jika Anda hanya ingin menyembunyikan bilah gulir vertikal , gunakan overflow-y
:
<style type="text/css">
body {
overflow-y: hidden;
}
</style>
Dan jika Anda ingin menyembunyikan hanya scrollbar horizontal , gunakan overflow-x
:
<style type="text/css">
body {
overflow-x: hidden;
}
</style>
Catatan: Ini juga akan menonaktifkan fitur gulir. Lihat jawaban di bawah ini jika Anda hanya ingin menyembunyikan bilah gulir, tetapi bukan fitur gulir.
hidden
pengguliran akan bekerja dengan roda penggulung mouse. Di Firefox, menggulir tidak akan berfungsi dengan roda penggulung mouse, butuh beberapa saat untuk mengetahuinya.
overflow: hidden
menonaktifkan pengguliran. Jika seseorang ingin menyembunyikan bilah gulir, maka mungkin mereka menganggap kontrol tidak perlu karena tidak ada konten untuk menggulir di tempat pertama . Atau mungkin mereka hanya tidak ingin menggulir semuanya .
WebKit mendukung elemen pseudo scrollbar yang dapat disembunyikan dengan aturan standar CSS:
#element::-webkit-scrollbar {
display: none;
}
Jika Anda ingin semua scrollbar disembunyikan, gunakan
::-webkit-scrollbar {
display: none;
}
Saya tidak yakin tentang pemulihan - ini berhasil, tetapi mungkin ada cara yang tepat untuk melakukannya:
::-webkit-scrollbar {
display: block;
}
Tentu saja Anda selalu dapat menggunakan width: 0
, yang kemudian dapat dengan mudah dipulihkan width: auto
, tetapi saya bukan penggemar penyalahgunaan width
untuk visibilitas tweak.
Firefox 64 sekarang mendukung properti width-scrollbar eksperimental secara default (63 membutuhkan flag konfigurasi untuk diatur). Untuk menyembunyikan bilah gulir di Firefox 64:
#element {
scrollbar-width: none;
}
Untuk melihat apakah browser Anda saat ini mendukung elemen pseudo atau scrollbar-width
, coba potongan ini:
(Perhatikan bahwa ini bukan jawaban yang benar untuk pertanyaan, karena menyembunyikan bilah horizontal juga, tapi itulah yang saya cari ketika Google menunjuk saya ke sini, jadi saya pikir saya akan tetap mempostingnya.)
Ketika Anda mengajukan pertanyaan, "Dapatkah bilah gulir dari browser dihapus dengan cara tertentu, bukan hanya disembunyikan atau disamarkan", semua orang akan mengatakan "Tidak mungkin" karena tidak mungkin untuk menghapus bilah gulir dari semua browser dalam suatu cara yang sesuai dan lintas-kompatibel, dan kemudian ada seluruh argumen kegunaan.
Namun, adalah mungkin untuk mencegah browser dari kebutuhan untuk menghasilkan dan menampilkan scrollbar jika Anda tidak mengizinkan halaman web Anda meluap.
Ini hanya berarti bahwa kita harus secara proaktif menggantikan perilaku yang sama yang biasanya dilakukan browser untuk kita dan memberi tahu browser terima kasih tetapi tidak, terima kasih sobat. Daripada mencoba menghilangkan scrollbar (yang kita semua tahu tidak mungkin), kita dapat menghindari scrolling (layak dilakukan) dan gulir di dalam elemen yang kita buat dan memiliki kontrol lebih besar atas.
Buat div dengan overflow tersembunyi. Deteksi ketika pengguna mencoba menggulir, tetapi tidak dapat karena kami telah menonaktifkan kemampuan browser untuk menggulir dengan overflow: disembunyikan .. dan alih-alih memindahkan konten menggunakan JavaScript saat ini terjadi. Dengan demikian membuat scrolling kita sendiri tanpa scrolling default browser atau menggunakan plugin seperti iScroll .
Demi menjadi teliti; semua cara spesifik vendor dalam memanipulasi scroll-bar:
* Properti ini tidak pernah menjadi bagian dari spesifikasi CSS, juga tidak pernah disetujui atau diawali vendor, tetapi mereka bekerja di Internet Explorer dan Konqueror. Ini juga dapat diatur secara lokal di lembar gaya pengguna untuk setiap aplikasi. Di Internet Explorer Anda menemukannya di bawah tab "Aksesibilitas", di Konqueror di bawah tab "Stylesheets".
body, html { /* These are defaults and can be replaced by hexadecimal color values */
scrollbar-base-color: aqua;
scrollbar-face-color: ThreeDFace;
scrollbar-highlight-color: ThreeDHighlight;
scrollbar-3dlight-color: ThreeDLightShadow;
scrollbar-shadow-color: ThreeDDarkShadow;
scrollbar-darkshadow-color: ThreeDDarkShadow;
scrollbar-track-color: Scrollbar;
scrollbar-arrow-color: ButtonText;
}
Pada Internet Explorer 8 properti ini adalah vendor diawali oleh Microsoft, tetapi mereka masih belum pernah disetujui oleh W3C .
-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color
Internet Explorer scroll
tersedia yang mengatur apakah akan menonaktifkan atau mengaktifkan bilah gulir; itu juga dapat digunakan untuk mendapatkan nilai posisi bilah gulir.
Dengan Microsoft Internet Explorer 6 dan yang lebih baru, ketika Anda menggunakan !DOCTYPE
deklarasi untuk menentukan mode yang sesuai standar, atribut ini berlaku untuk elemen HTML. Ketika modus standar-compliant tidak ditentukan, seperti dengan versi sebelumnya dari Internet Explorer, atribut ini berlaku untuk BODY
elemen, TIDAK yangHTML
elemen.
Ini juga perlu dicatat bahwa ketika bekerja dengan .NET kelas ScrollBar di System.Windows.Controls.Primitives
dalam kerangka Presentasi bertanggung jawab atas rendering scrollbar.
http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx
Ekstensi WebKit yang terkait dengan kustomisasi scroll-bar adalah:
::-webkit-scrollbar {} /* 1 */
::-webkit-scrollbar-button {} /* 2 */
::-webkit-scrollbar-track {} /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {} /* 5 */
::-webkit-scrollbar-corner {} /* 6 */
::-webkit-resizer {} /* 7 */
Ini masing-masing dapat dikombinasikan dengan penyeleksi semu tambahan:
:horizontal
- Kelas pseudo horizontal berlaku untuk setiap bilah gulir yang memiliki orientasi horizontal.:vertical
- Kelas pseudo vertikal berlaku untuk setiap bilah gulir yang memiliki orientasi vertikal.:decrement
- Class pseudo-decrement berlaku untuk tombol dan track piece. Ini menunjukkan apakah tombol atau track piece akan menurunkan posisi tampilan ketika digunakan (misalnya, di atas scrollbar vertikal, dibiarkan pada scrollbar horizontal).:increment
- Peningkatan pseudo-class berlaku untuk tombol dan track piece. Ini menunjukkan apakah tombol atau track piece akan meningkatkan posisi tampilan ketika digunakan (mis., Turun di scrollbar vertikal, tepat di scrollbar horizontal).:start
- Kelas pseudo awal berlaku untuk tombol dan lagu. Ini menunjukkan apakah objek ditempatkan sebelum jempol.:end
- Kelas pseudo akhir berlaku untuk tombol dan track piece. Ini menunjukkan apakah objek ditempatkan setelah ibu jari.:double-button
- Kelas pseudo tombol ganda berlaku untuk tombol dan lagu. Ini digunakan untuk mendeteksi apakah suatu tombol adalah bagian dari sepasang tombol yang bersama-sama di ujung scrollbar yang sama. Untuk lagu, ini menunjukkan apakah lagu tersebut berbatasan dengan sepasang tombol.:single-button
- Kelas pseudo tombol tunggal berlaku untuk tombol dan lagu. Ini digunakan untuk mendeteksi apakah sebuah tombol dengan sendirinya di ujung scrollbar. Untuk lagu, ini menunjukkan apakah lagu tersebut berbatasan dengan tombol tunggal.:no-button
- Berlaku untuk melacak bagian dan menunjukkan apakah potongan trek berjalan ke tepi bilah gulir, yaitu, tidak ada tombol di ujung trek.:corner-present
- Berlaku untuk semua bagian bilah gulir dan menunjukkan ada atau tidaknya sudut bilah gulir.:window-inactive
- Berlaku untuk semua bagian bilah gulir dan menunjukkan apakah jendela yang berisi bilah gulir sedang aktif atau tidak. (Dalam nightlies baru-baru ini, kelas pseudo ini sekarang berlaku untuk :: selection juga. Kami berencana untuk memperluasnya agar berfungsi dengan konten apa pun dan mengusulkannya sebagai kelas pseudo standar baru.)Contoh kombinasi ini
::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }
addWindowScrollHandler public static HandlerRegistration addWindowScrollHandler (Window.ScrollHandler handler)
Menambahkan Parameter handler Window.ScrollEvent: handler - handler Returns: mengembalikan registrasi handler [ sumber ] ( http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html# addWindowScrollHandler (com.google.gwt.user.client.Window.ScrollHandler) )
Mozilla memang memiliki beberapa ekstensi untuk memanipulasi bilah gulir, tetapi semuanya disarankan untuk tidak digunakan.
-moz-scrollbars-none
Mereka merekomendasikan menggunakan overflow: disembunyikan di tempat ini.-moz-scrollbars-horizontal
Mirip dengan overflow-x-moz-scrollbars-vertical
Mirip dengan overflow-y-moz-hidden-unscrollable
Hanya berfungsi secara internal di dalam pengaturan profil pengguna. Nonaktifkan menggulir elemen root XML dan menonaktifkan menggunakan tombol panah dan roda mouse untuk menggulir halaman web.
Sejauh ini saya tidak benar-benar berguna, tetapi perlu dicatat bahwa atribut yang mengontrol apakah scrollbar ditampilkan di Firefox adalah ( tautan referensi ):
Seperti yang telah disebutkan sebelumnya dalam beberapa jawaban lain, berikut adalah ilustrasi yang cukup jelas.
Hanya karena saya penasaran, saya ingin belajar tentang asal-usul scrollbar, dan ini adalah referensi terbaik yang saya temukan.
Dalam konsep spesifikasi HTML5, seamless
atribut didefinisikan untuk mencegah bilah gulir muncul di iFrames sehingga mereka dapat dicampur dengan konten di sekitarnya pada halaman . Padahal elemen ini tidak muncul di revisi terbaru.
The scrollbar
BarProp objek adalah anak dari window
objek dan merupakan elemen antarmuka pengguna yang berisi mekanisme bergulir, atau beberapa konsep antarmuka yang mirip. window.scrollbars.visible
akan kembali true
jika bilah gulir terlihat.
interface Window {
// The current browsing context
readonly attribute WindowProxy window;
readonly attribute WindowProxy self;
attribute DOMString name;
[PutForwards=href] readonly attribute Location location;
readonly attribute History history;
readonly attribute UndoManager undoManager;
Selection getSelection();
[Replaceable] readonly attribute BarProp locationbar;
[Replaceable] readonly attribute BarProp menubar;
[Replaceable] readonly attribute BarProp personalbar;
[Replaceable] readonly attribute BarProp scrollbars;
[Replaceable] readonly attribute BarProp statusbar;
[Replaceable] readonly attribute BarProp toolbar;
void close();
void focus();
void blur();
// Truncated
API Sejarah juga menyertakan fitur untuk pemulihan gulir pada navigasi halaman untuk mempertahankan posisi gulir pada pemuatan halaman.
window.history.scrollRestoration
dapat digunakan untuk memeriksa status restorasi gulir atau mengubah statusnya (menambahkan ="auto"/"manual"
. Otomatis adalah nilai default. Mengubahnya menjadi manual berarti Anda sebagai pengembang akan memiliki kepemilikan atas setiap perubahan gulir yang mungkin diperlukan saat pengguna menelusuri riwayat aplikasi Jika perlu, Anda dapat melacak posisi gulir saat mendorong entri riwayat dengan history.pushState ().
Anda dapat melakukan ini dengan pembungkus div
yang memiliki overflow tersembunyi, dan div
set bagian dalam auto
.
Untuk menghapus div
bilah gulir bagian dalam , Anda dapat menariknya keluar dari div
viewport luar dengan menerapkan margin negatif ke bagian dalam div
. Kemudian oleskan padding yang sama ke div bagian dalam sehingga konten tetap terlihat.
<div class="hide-scroll">
<div class="viewport">
...
</div>
</div>
.hide-scroll {
overflow: hidden;
}
.viewport {
overflow: auto;
/* Make sure the inner div is not larger than the container
* so that we have room to scroll.
*/
max-height: 100%;
/* Pick an arbitrary margin/padding that should be bigger
* than the max width of all the scroll bars across
* the devices you are targeting.
* padding = -margin
*/
margin-right: -100px;
padding-right: 100px;
}
height: inherited
di .viewport
css.
100%
lebih fleksibel dan melakukan pekerjaan.
-100px
dan 100px
??
Ini berfungsi untuk saya dengan properti CSS sederhana:
.container {
-ms-overflow-style: none; // Internet Explorer 10+
scrollbar-width: none; // Firefox
}
.container::-webkit-scrollbar {
display: none; // Safari and Chrome
}
Untuk versi Firefox yang lebih lama, gunakan: overflow: -moz-scrollbars-none;
overflow: -moz-scrollbars-none;
maka Anda berhasil menghapus scrollbar, tetapi Anda juga menghapus kemampuan untuk menggulir. Anda mungkin juga mengatur overflow: hidden
ke .container
.
-moz-scrollbars-none
: "Ini adalah API usang dan tidak lagi dijamin berfungsi."
Inilah solusi saya, yang secara teoritis mencakup semua browser modern:
html {
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
html::-webkit-scrollbar {
width: 0px; /* For Chrome, Safari, and Opera */
}
html
dapat diganti dengan elemen apa pun yang ingin Anda sembunyikan di scrollbar.
Catatan : Saya telah membaca 19 jawaban lainnya untuk melihat apakah kode yang saya posting sudah tercakup, dan sepertinya tidak ada satu jawaban yang meringkas situasi seperti yang terjadi pada 2019, meskipun banyak dari mereka masuk ke detail yang sangat baik. Mohon maaf jika ini telah dikatakan oleh orang lain dan saya melewatkannya.
Saya pikir saya menemukan solusi untuk kalian jika Anda masih tertarik. Ini adalah minggu pertamaku, tapi itu berhasil untukku ...
<div class="contentScroller">
<div class="content">
</div>
</div>
.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}
Jika Anda mencari solusi untuk menyembunyikan bilah gulir untuk perangkat seluler, ikuti jawaban Peter !
Ini jsfiddle , yang menggunakan solusi di bawah ini untuk menyembunyikan scrollbar horizontal.
.scroll-wrapper{
overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar {
display: none;
}
Itu diuji pada tablet Samsung dengan Android 4.0.4 (Ice Cream Sandwich, baik di browser asli dan Chrome) dan pada iPad dengan iOS 6 (baik di Safari dan Chrome).
Gunakan properti CSS :overflow
.noscroll {
width: 150px;
height: 150px;
overflow: auto; /* Or hidden, or visible */
}
Berikut ini beberapa contoh lainnya:
Seperti yang sudah dikatakan orang lain, gunakan CSS overflow
.
Tetapi jika Anda masih ingin pengguna dapat menggulir konten itu (tanpa scrollbar terlihat) Anda harus menggunakan JavaScript.
Se jawaban saya di sini untuk solusi: Sembunyikan scrollbar sementara masih bisa gulir dengan mouse / keyboard
Pendekatan lintas peramban untuk menyembunyikan bilah gulir.
Itu diuji pada Edge, Chrome, Firefox, dan Safari
Sembunyikan bilah gulir saat masih dapat menggulir dengan roda mouse!
/* Make parent invisible */
#parent {
visibility: hidden;
overflow: scroll;
}
/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
visibility: visible;
}
/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
visibility: hidden;
}
/* Make the child visible */
#child {
visibility: visible;
}
Jika Anda ingin menggulir agar berfungsi, sebelum menyembunyikan bilah gulir, pertimbangkan untuk mengaturnya. Versi modern OS X dan OS seluler memiliki bilah gulir yang, walaupun tidak praktis untuk dipegang dengan mouse, cukup indah dan netral.
Untuk menyembunyikan scrollbar, teknik oleh John Kurlak bekerja dengan baik kecuali untuk meninggalkan pengguna Firefox yang tidak memiliki touchpad tanpa cara untuk menggulir kecuali mereka memiliki mouse dengan roda, yang mungkin mereka lakukan, tetapi bahkan kemudian mereka biasanya hanya dapat menggulir secara vertikal .
Teknik John menggunakan tiga elemen:
Harus dimungkinkan untuk mengatur ukuran elemen luar dan konten yang sama yang menghilangkan penggunaan persentase, tapi saya tidak bisa memikirkan hal lain yang tidak akan bekerja dengan tweaker yang tepat.
Kekhawatiran terbesar saya adalah apakah semua versi browser mengatur bilah gulir untuk membuat konten yang meluap terlihat. Saya telah menguji di browser saat ini, tetapi tidak pada browser yang lebih lama.
Maafkan SASS saya ; P
%size {
// set width and height
}
.outer {
// mask scrollbars of child
overflow: hidden;
// set mask size
@extend %size;
// has absolutely positioned child
position: relative;
}
.middle {
// always have scrollbars.
// don't use auto, it leaves vertical scrollbar showing
overflow: scroll;
// without absolute, the vertical scrollbar shows
position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
display: none;
}
.content {
// push scrollbars behind mask
@extend %size;
}
OS X adalah 10.6.8. Windows adalah Windows 7.
@mixin{}
, Anda akan melakukannya %size{}
di penyeleksi css, panggil @extend %size;
. Mixin biasanya digunakan ketika Anda menarik variabel untuk mengembalikan hasil. Placeholder (alias @extend) dimaksudkan untuk kode berulang sederhana seperti ini - di mana tidak ada "fungsi" diperlukan.
Saya hanya berpikir saya akan menunjukkan kepada orang lain yang membaca pertanyaan ini bahwa pengaturan overflow: hidden
(atau overflow-y) padabody
elemen tidak menyembunyikan scrollbar untuk saya.
Saya harus menggunakan html
elemen.
Saya menulis versi WebKit dengan beberapa opsi seperti sembunyikan otomatis , versi kecil , gulir -y saja , atau hanya-x :
._scrollable{
@size: 15px;
@little_version_ratio: 2;
@scrollbar-bg-color: rgba(0,0,0,0.15);
@scrollbar-handler-color: rgba(0,0,0,0.15);
@scrollbar-handler-color-hover: rgba(0,0,0,0.3);
@scrollbar-coner-color: rgba(0,0,0,0);
overflow-y: scroll;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 100%;
&::-webkit-scrollbar {
background: none;
width: @size;
height: @size;
}
&::-webkit-scrollbar-track {
background-color:@scrollbar-bg-color;
border-radius: @size;
}
&::-webkit-scrollbar-thumb {
border-radius: @size;
background-color:@scrollbar-handler-color;
&:hover{
background-color:@scrollbar-handler-color-hover;
}
}
&::-webkit-scrollbar-corner {
background-color: @scrollbar-coner-color;
}
&.little{
&::-webkit-scrollbar {
background: none;
width: @size / @little_version_ratio;
height: @size / @little_version_ratio;
}
&::-webkit-scrollbar-track {
border-radius: @size / @little_version_ratio;
}
&::-webkit-scrollbar-thumb {
border-radius: @size / @little_version_ratio;
}
}
&.autoHideScrollbar{
overflow-x: hidden;
overflow-y: hidden;
&:hover{
overflow-y: scroll;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
&.only-y{
overflow-y: scroll !important;
overflow-x: hidden !important;
}
&.only-x{
overflow-x: scroll !important;
overflow-y: hidden !important;
}
}
}
&.only-y:not(.autoHideScrollbar){
overflow-y: scroll !important;
overflow-x: hidden !important;
}
&.only-x:not(.autoHideScrollbar){
overflow-x: scroll !important;
overflow-y: hidden !important;
}
}
Salin kode CSS ini ke kode pelanggan untuk menyembunyikan bilah gulir:
<style>
::-webkit-scrollbar {
display: none;
}
#element::-webkit-scrollbar {
display: none;
}
</style>
HTML saya seperti ini:
<div class="container">
<div class="content">
</div>
</div>
Tambahkan ini ke div
tempat Anda ingin menyembunyikan scrollbar:
.content {
position: absolute;
right: -100px;
overflow-y: auto;
overflow-x: hidden;
height: 75%; /* This can be any value of your choice */
}
Dan tambahkan ini ke wadah
.container {
overflow-x: hidden;
max-height: 100%;
max-width: 100%;
}
Untuk menonaktifkan bilah gulir vertikal, cukup tambahkan overflow-y:hidden;
.
Temukan lebih banyak tentang itu: melimpah .
Jawaban saya akan bergulir bahkan ketika overflow:hidden;
, menggunakan jQuery:
Misalnya, gulir secara horizontal dengan roda mouse:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
$(function() {
$("YourSelector").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
</script>
Saya yakin Anda dapat memanipulasinya dengan overflow
atribut CSS, tetapi mereka memiliki dukungan browser yang terbatas. Satu sumber mengatakan itu Internet Explorer 5 (dan lebih baru), Firefox 1.5 (dan lebih baru), dan Safari 3 (dan lebih baru) - mungkin cukup untuk keperluan Anda.
Menggulir, Menggulir, Menggulir memiliki diskusi yang baik.
Saya mencoba segalanya dan yang paling berhasil untuk solusi saya adalah selalu memiliki tampilan scrollbar vertikal, dan kemudian menambahkan beberapa margin negatif untuk menyembunyikannya.
body {
overflow-y: scroll;
margin-right: -20px;
}