Nonaktifkan scrollbar vertikal dan horizontal browser

117

Apakah mungkin untuk menonaktifkan scrollbar vertikal dan horizontal browser menggunakan jQuery atau javascript?

javascript jquery naveen
sumber
Saya pikir dalam beberapa situasi khususnya jika Anda ingin beralih antara gulir dan tanpa gulir, solusi ini lebih disukai: stackoverflow.com/questions/8701754/…
Yousef Salimpour
Anda dapat menemukan jawaban yang lebih lengkap untuk pertanyaan ini di sini stackoverflow.com/a/25561646/1922144
davidcondrey

Jawaban:

144

Jika Anda memerlukan kemungkinan untuk menyembunyikan dan menampilkan scrollbar secara dinamis yang dapat Anda gunakan

$("body").css("overflow", "hidden");

dan

$("body").css("overflow", "auto");

di suatu tempat di kode Anda.

Alexander Prokofyev
sumber
4
Overflow tersembunyi tidak selalu berfungsi di IE. Lihat jawaban AnthonyWJones di bawah ini.
Tiago Almeida
4
oveflow: hiddentidak akan mencegah apa pun di ponsel cerdas.
dvlden
Di chrome, ini menonaktifkan scrollbar tanpa menyembunyikannya (masih ada dan masih mengubah ukuran semua yang lain, tetapi sekarang berwarna abu-abu)
taltamir
121 
function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // ie only
}
Lyncee
sumber
5
Dua suara positif sangat sedikit karena menjadi satu-satunya jawaban javascript murni.
Fzs2
2
@HermannIngjaldsson: Melihat OP meminta solusi JavaScript atau jQuery dan telah menerima solusi jQuery 4 tahun yang lalu, itu hanya masuk akal. Saya tidak mengatakan jawabannya tidak baik, hanya menyatakan dengan jelas tentang suara yang lebih rendah. +1 dari saya.
Tidak
ini adalah satu-satunya solusi yang berhasil untuk saya, karena body hidden overflow tidak menyerang seluruh dokumen, ini adalah solusi yang tepat untuk masalah ini! terima kasih banyak, Anda menghemat banyak waktu!
Adnane.T
Ini adalah solusi yang brilian dan layak mendapat suara positif. Ini juga menyelesaikan masalah dengan css tetap, di mana halaman akan digulir ke atas.
haipham23
50

Coba CSS

<body style="overflow: hidden">
Ray Lu
sumber
15
Untuk kompatibilitas browser, saya juga menambahkan gaya ini ke tag HTML: html, body {overflow: hidden;}
Ady
32

Sejauh ini kami memiliki overflow: tersembunyi di tubuh. Namun IE tidak selalu menghormati itu dan Anda perlu meletakkan scroll = "no" pada elemen body juga dan / atau menempatkan overflow: hidden pada elemen html juga.

Anda dapat mengambil ini lebih jauh ketika Anda perlu 'mengambil kendali' dari port tampilan, Anda dapat melakukan ini: -

<style>
 body {width:100%; height:100%; overflow:hidden; margin:0; }
 html {width:100%; height:100%; overflow:hidden; }
</style>

Sebuah elemen yang diberikan tinggi 100% di tubuh memiliki tinggi penuh dari viewport jendela, dan elemen diposisikan secara mutlak menggunakan bottom: nnPX akan diatur nn piksel di atas tepi bawah jendela, dll.

AnthonyWJones
sumber
2
tidakkah ',' seharusnya ';', di css tubuh?
paynestrike
12

Coba CSS.

Jika Anda ingin menghapus Horizontal

overflow-x: hidden;

Dan jika Anda ingin menghapus Vertical

overflow-y: hidden;
shafraz.dll
sumber
10

Di versi modern IE (IE10 dan yang lebih baru), scrollbar dapat disembunyikan menggunakan -ms-overflow-styleproperti .

html {
     -ms-overflow-style: none;
}

Di Chrome, scrollbar dapat diberi gaya:

::-webkit-scrollbar {
    display: none;
}

Ini sangat berguna jika Anda ingin menggunakan body scrolling 'default' di aplikasi web, yang jauh lebih cepat daripada overflow-y: scroll.

Lg102
sumber
hanya ini yang berhasil untuk saya dari semua jawaban :) terima kasih!
Gediminas
9

Jika Anda juga membutuhkan dukungan untuk Internet Explorer 6, cukup limpahkan html

$("html").css("overflow", "hidden");

dan

$("html").css("overflow", "auto");
Gawin
sumber
5

IE memiliki beberapa bug dengan scrollbar. Jadi jika Anda menginginkan salah satu dari keduanya, Anda harus menyertakan yang berikut ini untuk menyembunyikan scrollbar horizontal:

overflow-x: hidden;
overflow-y:scroll;

dan untuk menyembunyikan vertikal:

overflow-y: hidden;
overflow-x: scroll;

Zeeshan Ali
sumber
4

(Saya belum bisa berkomentar, tapi ingin membagikan ini):

Kode Lyncee berfungsi untuk saya di browser desktop. Namun, di iPad (Chrome, iOS 9), aplikasi tersebut mogok. Untuk memperbaikinya, saya berubah

document.documentElement.style.overflow = ...

untuk

document.body.style.overflow = ...

yang memecahkan masalah saya.

Erasmus Cedernaes
sumber
2

Karena Firefox memiliki panah pintas kunci, Anda mungkin ingin menempatkan <div>di sekitarnya dengan gaya CSS: overflow:hidden;.

Qvcool
sumber
2

Menggunakan JQuery Anda dapat menonaktifkan bilah gulir dengan kode ini: 

$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
     }
});

Anda juga dapat mengaktifkannya lagi dengan kode ini:

 $('body').unbind('mousewheel');
gtzinos
sumber