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

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