Nonaktifkan Scrolling on Body

137

Saya ingin menonaktifkan pengguliran pada HTML bodysepenuhnya. Saya sudah mencoba opsi berikut:

  • overflow: hidden; (tidak berfungsi, tidak menonaktifkan scrolling, hanya menyembunyikan scrollbar)

  • position: fixed; (ini berfungsi, tetapi digulir sepenuhnya ke atas, yang tidak dapat diterima untuk aplikasi khusus ini)

Saya tidak dapat menemukan alternatif untuk kedua opsi ini, apakah ada lagi?

html css scroll Micha Wiedenmann
sumber
3
untuk elemen mana Anda menerapkan overflow: disembunyikan?
Sajad Karuthedath
Apa yang sebenarnya ingin Anda capai di sini? Apa tujuan akhir Anda?
jbutler483
2
Menampilkan kode yang relevan akan memudahkan Anda.
Sleek Geek
1
overflow: disembunyikan; adalah cara untuk pergi. Jika tidak berhasil, Anda memiliki masalah lain di css Anda. Coba html, body {overflow: hidden;} jika ini tidak berhasil coba * {overflow: hidden;} dan coba cari tahu apa yang salah
Jonas Grumann

Jawaban:

245

Atur heightdan overflow:

html, body {margin: 0; height: 100%; overflow: hidden}

http://jsfiddle.net/q99hvawt/

harimau kumbang
sumber
3
lupa tentang "html," sebelum "tubuh.
2
Tidak berfungsi di iOS saat Anda memiliki elemen overlay yang memiliki posisi tetap.
notQ
1
Anda bisa menambahkan "overflow": "hidden" dan itu akan berfungsi dengan baik.
JPG
Solusi ini tidak langsung bekerja untuk saya, tetapi setelah pemeriksaan "margin" sedang diganti di suatu tempat. Mengatur "margin: 0;" elemen itu melakukan trik.
joaoprib
19

HTML css berfungsi dengan baik jika tag tubuh tidak melakukan apa pun yang dapat Anda tulis juga

<body scroll="no" style="overflow: hidden">

Dalam hal ini pengesampingan harus pada tag tubuh, lebih mudah untuk mengontrol tetapi kadang-kadang membuat sakit kepala.

Lalo
sumber
21
Ini tidak valid HTML5
mbomb007
@ mbomb007 Bisakah Anda mengomentari kesalahan di sini terkait dengan HTML5?
Ethan
5
@Ethan scrollAtribut tidak valid pada <body>tag. Itu tidak terdaftar sebagai valid pada spesifikasi apa pun yang dapat saya temukan. w3sekolah ; MDN ; Quackit
mbomb007
14

Posting ini bermanfaat, tetapi hanya ingin membagikan sedikit alternatif yang dapat membantu orang lain:

Pengaturan max-heightbukannya heightjuga melakukan trik. Dalam kasus saya, saya menonaktifkan pengguliran berdasarkan toggle kelas. Menyetel .someContainer {height: 100%; overflow: hidden;}saat tinggi wadah lebih kecil daripada viewport akan meregangkan wadah, yang tidak akan seperti yang Anda inginkan. Menyetel max-heightakun untuk ini, tetapi jika tinggi wadah lebih besar dari viewport ketika konten berubah, masih menonaktifkan pengguliran.

joebjoe
sumber
ini menghemat hari saya untuk browser desktop tanpa efek samping yang tidak diinginkan dari scroll-top-top. tetapi tidak berfungsi di browser seluler (iphone5s dan android).
bob
5

Untuk mencapai ini, tambahkan 2 properti CSS pada <body>elemen.

body {
   height: 100%;
   overflow-y: hidden;
}

Saat ini ada banyak situs web berita yang mengharuskan pengguna untuk membuat akun. Biasanya mereka akan memberikan akses penuh ke halaman selama sekitar satu detik, dan kemudian mereka muncul pop-up, dan menghentikan pengguna dari menggulir ke bawah.

Telegraph

bvdb
sumber
ini menyembunyikan bilah gulir. Namun, pertanyaannya secara khusus meminta alternatif untuk menyembunyikan bilah gulir
DataGeek
@ DataGeek, ini tidak hanya menyembunyikan bilah gulir, tetapi juga menghentikan kemampuan untuk menggulir ke bawah. Dan seperti yang saya mengerti itulah yang diminta. yaitu tidak hanya menyembunyikannya, tetapi juga membuatnya tidak mungkin untuk menggulir ke bawah.
bvdb