Saya menggunakan plugin scrollTo jQuery dan ingin tahu apakah ada kemungkinan untuk menonaktifkan sementara bergulir pada elemen jendela melalui Javascript? Alasan saya ingin menonaktifkan pengguliran adalah ketika Anda menggulir saat scrollTo sedang menjiwai, itu menjadi sangat jelek;)
Tentu saja, saya bisa melakukan $("body").css("overflow", "hidden");
dan kemudian mengembalikannya ke otomatis ketika animasi berhenti, tetapi akan lebih baik jika scrollbar itu masih terlihat tetapi tidak aktif.
javascript
jquery
scroll
Olivier Lalonde
sumber
sumber
Jawaban:
The
scroll
event tidak dapat dibatalkan. Tetapi Anda dapat melakukannya dengan membatalkan acara interaksi ini: Gulirmouse & Sentuh dan Tombol yang terkait dengan pengguliran.
[ Demo kerja ]
UPDATE: memperbaiki desktop Chrome dan browser ponsel modern dengan pendengar pasif
sumber
Lakukan itu hanya dengan menambahkan kelas ke tubuh:
Tambahkan kelas lalu hapus ketika Anda ingin mengaktifkan kembali pengguliran, diuji di IE, FF, Safari dan Chrome.
Untuk perangkat seluler , Anda harus menangani
touchmove
acara:Dan lepaskan ikatan untuk mengaktifkan kembali scroll. Diuji di iOS6 dan Android 2.3.3
sumber
touchmove
acara tersebut, seperti dengan$('body').bind('touchmove', function(e){e.preventDefault()})
. Diedit jawaban ini untuk memasukkan solusi seluler ini.$('body,html')
Inilah cara yang sangat mendasar untuk melakukannya:
Agak gelisah di IE6.
sumber
(0, 0)
, cukup gunakan posisi gulir saat ini.Solusi berikut ini adalah JavaScript dasar tetapi murni (tanpa jQuery):
sumber
scroll-behavior: smooth
borks this. Juga, saya tidak setuju dengan Oto yang mengatakan bahwa itu adalah kesalahan browser. Anda pada dasarnya berasumsi bahwa sesuatu akan terjadi secara instan padahal kenyataannya asinkronSolusi ini akan mempertahankan posisi gulir saat ini sementara menggulir dinonaktifkan, tidak seperti beberapa yang melompat pengguna kembali ke atas.
Ini didasarkan pada jawaban galambalazs , tetapi dengan dukungan untuk perangkat sentuh, dan di refactored sebagai objek tunggal dengan pembungkus plugin jquery.
Demo di sini.
Di github di sini.
sumber
mousewheel
berhasil pesonaSaya minta maaf untuk menjawab posting lama tetapi saya sedang mencari solusi dan menemukan pertanyaan ini.
Ada banyak solusi untuk masalah ini agar tetap menampilkan bilah gulir, seperti memberi wadah tinggi 100% dan
overflow-y: scroll
gaya.Dalam kasus saya, saya baru saja membuat div dengan scrollbar yang saya tampilkan sambil menambahkan
overflow: hidden
ke badan:Bilah gulir elemen harus memiliki gaya ini:
Ini menunjukkan scrollbar abu-abu, semoga membantu pengunjung di masa depan.
sumber
Saya mencari solusi untuk masalah ini tetapi tidak puas dengan salah satu solusi di atas ( saat menulis jawaban ini ), jadi saya datang dengan solusi ini ..
CSS
JS
sumber
overflow-y: scroll
ke.scrollDisabled
gaya. Kalau tidak, ada sedikit lompatan ketika bilah gulir bersembunyi setiap kali. Tentu saja, itu hanya berfungsi untuk saya karena halaman saya cukup lama sehingga memerlukan scrollbar bahkan pada layar terbesar.Menurut posting galambalazs saya akan menambahkan dukungan untuk perangkat sentuh, memungkinkan kita untuk menyentuh tetapi tidak ada gulir ke atas atau ke bawah:
sumber
Pada Chrome 56 dan browser modern lainnya, Anda harus menambahkan
passive:false
keaddEventListener
panggilan untuk membuatpreventDefault
pekerjaan. Jadi saya menggunakan ini untuk berhenti menggulir di ponsel:sumber
Tidak, saya tidak akan pergi dengan penanganan acara karena:
tidak semua acara dijamin mencapai tubuh,
memilih teks dan bergerak ke bawah sebenarnya menggulung dokumen,
jika pada tahap pelepasan sth terjadi kesalahan Anda ditakdirkan.
Saya sudah digigit oleh ini dengan membuat tindakan copy-paste dengan textarea tersembunyi dan coba tebak, halaman gulir setiap kali saya membuat copy karena secara internal saya harus memilih textarea sebelum saya menelepon
document.execCommand('copy')
.Pokoknya begitulah cara saya pergi, perhatikan
setTimeout()
:Sebuah momentum yang berkedip ada saat bilah gulir menghilang sebentar, tetapi itu bisa diterima.
sumber
Bergantung pada apa yang ingin Anda capai dengan gulir yang dihapus, Anda bisa memperbaiki elemen yang ingin Anda hapus gulir (saat klik, atau pemicu lain apa pun yang ingin Anda matikan sementara gulir)
Saya mencari-cari solusi "temp no scroll" dan untuk kebutuhan saya, ini menyelesaikannya
buat kelas
lalu dengan Jquery
Saya menemukan bahwa ini adalah solusi yang cukup sederhana yang bekerja dengan baik di semua browser, dan juga membuatnya mudah digunakan pada perangkat portabel (yaitu iPhone, tablet, dll). Karena elemen sementara diperbaiki, tidak ada scroll :)
CATATAN! Bergantung pada penempatan elemen "contentContainer" Anda, Anda mungkin perlu menyesuaikannya dari kiri. Yang dapat dengan mudah dilakukan dengan menambahkan nilai kiri css ke elemen itu ketika kelas tetap aktif
sumber
Solusi lain:
Dengan cara ini Anda selalu memiliki bilah gulir vertikal, tetapi karena sebagian besar konten saya lebih panjang dari viewport, ini ok untuk saya. Konten dipusatkan dengan div terpisah, tetapi tanpa mengatur margin lagi di tubuh konten saya akan tetap di sebelah kiri.
Ini adalah dua fungsi yang saya gunakan untuk menampilkan munculan / modal saya:
Hasil: latar belakang yang tidak dapat digulir dan tidak ada pemosisian ulang konten karena scrollbar kiri. Diuji dengan FF saat ini, Chrome dan IE 10.
sumber
Bagaimana dengan ini? (Jika Anda menggunakan jQuery)
sumber
Saya menggunakan showModalDialog , untuk menampilkan halaman sekunder sebagai dialog modal.
untuk menyembunyikan scrollbar jendela utama:
dan saat menutup dialog modal, menampilkan bilah gulir jendela utama:
untuk mengakses elemen di jendela utama dari dialog:
hanya untuk siapa saja yang mencari tentang showModalDialog : (setelah baris 29 dari kode asli)
sumber
Membatalkan acara seperti pada jawaban yang diterima adalah metode yang mengerikan menurut saya: /
Sebaliknya saya gunakan di
position: fixed; top: -scrollTop();
bawah ini.Demo: https://jsfiddle.net/w9w9hthy/5/
Dari proyek popup jQuery saya: https://github.com/seahorsepip/jPopup
Kode ini mempertimbangkan, lebar, tinggi, scrollbar dan masalah pagejump menjadi pertimbangan.
Kemungkinan masalah teratasi dengan kode di atas:
Jika ada yang memiliki perbaikan pada kode pembekuan / pembekuan halaman di atas, beri tahu saya agar saya dapat menambahkan peningkatan tersebut ke proyek saya.
sumber
sumber
Saya memiliki masalah yang sama, di bawah ini adalah cara saya menanganinya.
semoga ini membantu.
sumber
Membangun jawaban Cheyenne Forbes, dan yang saya temukan di sini melalui fcalderan: Cukup nonaktifkan scroll bukan menyembunyikannya? dan untuk memperbaiki masalah Hallodom tentang scrollbar menghilang
CSS:
JS:
Kode ini membuat Anda melompat ke bagian atas halaman, tetapi saya pikir kode fcalderan memiliki solusi.
sumber
Saya tahu ini adalah pertanyaan lama, tetapi saya harus melakukan sesuatu yang sangat mirip, dan setelah beberapa waktu mencari jawaban dan mencoba pendekatan yang berbeda, saya akhirnya menggunakan solusi yang sangat mudah.
Masalah saya sangat mirip, hampir identik, satu-satunya perbedaan adalah saya tidak harus benar-benar menampilkan bilah gulir - Saya hanya harus memastikan lebarnya masih akan digunakan, sehingga lebar halaman tidak akan berubah saat overlay saya ditampilkan .
Ketika saya mulai menggeser hamparan saya ke layar, saya lakukan:
dan setelah saya geser overlay saya dari layar saya lakukan:
PENTING: ini berfungsi dengan baik karena overlay saya diposisikan
absolute
,right: 0px
kapanvisible
.sumber
Metode paling sederhana adalah:
Untuk membatalkannya:
Mudah diimplementasikan, tetapi satu-satunya downside adalah:
Ini karena bilah gulir dihapus, dan viewport menjadi sedikit lebih lebar.
sumber
body
kehtml
.overflow:hidden
tidak berfungsi di sanaIni solusi saya untuk menghentikan scroll (tidak ada jQuery). Saya menggunakannya untuk menonaktifkan gulir ketika menu samping muncul.
Saya menempatkan 17px padding-right untuk mengkompensasi hilangnya scroll bar. Tapi ini juga bermasalah, kebanyakan untuk browser seluler. Dipecahkan dengan mendapatkan lebar bilah sesuai dengan ini .
Semua bersama dalam Pena ini.
sumber
Saya memiliki masalah serupa pada perangkat sentuh. Menambahkan "aksi sentuh: tidak ada" ke elemen menyelesaikan masalah.
Untuk informasi lebih lanjut. Lihat ini: -
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
sumber
Ini adalah solusi paling sederhana yang saya dapatkan sejauh ini. Dan percayalah, saya sudah mencoba yang lain dan ini yang paling mudah. Ini berfungsi dengan baik pada perangkat Windows , yang mendorong halaman dari kanan untuk memiliki ruang untuk scrollbar sistem dan perangkat IOS yang tidak memerlukan ruang untuk scrollbar mereka di browser. Jadi dengan menggunakan ini Anda tidak perlu menambahkan padding di sebelah kanan sehingga halaman tidak berkedip ketika Anda menyembunyikan overflow tubuh atau html dengan css .
Solusinya cukup sederhana jika Anda memikirkannya. Idenya adalah untuk memberikan window.scrollTop () posisi tepat yang sama pada saat popup dibuka. Juga ubah posisi itu ketika ukuran jendela (karena posisi gulir berubah begitu itu terjadi).
Jadi di sini kita pergi ...
Pertama mari kita buat variabel yang akan memberi tahu Anda bahwa popup terbuka dan menyebutnya stopWindowScroll . Jika kami tidak melakukan ini, maka Anda akan mendapatkan kesalahan dari variabel yang tidak ditentukan pada halaman Anda dan mengaturnya ke 0 - sebagai tidak aktif.
Sekarang mari kita buat penyihir fungsi popup terbuka dapat berupa fungsi apa pun dalam kode Anda yang memicu sembulan apa pun yang Anda gunakan sebagai plugin atau kustom. Dalam hal ini akan menjadi popup kustom sederhana dengan dokumen sederhana pada fungsi klik.
Jadi hal berikutnya yang kita lakukan adalah membuat fungsi tutup sembulan, yang saya ulangi lagi dapat berupa fungsi apa pun yang sudah Anda buat atau gunakan dalam sebuah plugin. Yang penting adalah bahwa kita membutuhkan 2 fungsi untuk mengatur variabel stopWindowScroll menjadi 1 atau 0 untuk mengetahui kapan itu terbuka atau tertutup.
Kemudian mari kita buat fungsi window.scroll sehingga kita dapat mencegah pengguliran begitu stopWindowScroll yang disebutkan di atas diatur ke 1 - sebagai aktif.
Itu dia. Tidak diperlukan CSS agar ini berfungsi kecuali gaya Anda sendiri untuk halaman tersebut. Ini berfungsi seperti pesona bagi saya dan saya harap ini membantu Anda dan orang lain.
Berikut ini contoh yang berhasil di JSFiddle:
Contoh JS Fiddle
Beri tahu saya jika ini membantu. Salam.
sumber
sumber
Kode ini akan berfungsi di Chrome 56 dan lebih lanjut (jawaban asli tidak berfungsi di Chrome lagi).
Menggunakan
DomUtils.enableScroll()
untuk mengaktifkan pengguliran.Gunakan
DomUtils.disableScroll()
untuk menonaktifkan pengguliran.sumber
Untuk mencegah lompatan, inilah yang saya gunakan
dan di css saya
sumber
Saya menemukan jawaban ini di situs lain :
Nonaktifkan gulir:
Setelah menutup gulir rilis popup:
sumber
solusi galambalazs luar biasa! Ini bekerja dengan baik untuk saya di Chrome dan Firefox. Dan itu juga dapat diperpanjang untuk mencegah acara default apa pun dari jendela browser. Katakanlah Anda sedang melakukan aplikasi di atas kanvas. Anda bisa melakukan ini:
Dan kemudian pada aplikasi Anda katakanlah Anda akan memproses acara Anda sendiri, seperti mouse, keyboard, acara sentuh dan sebagainya ... Anda dapat menonaktifkan acara default ketika mouse masuk ke dalam kanvas dan mengaktifkannya kembali ketika mouse keluar:
Anda bahkan dapat menonaktifkan menu klik kanan dengan peretasan ini:
sumber
Saya memiliki masalah animasi yang serupa pada layar ponsel tetapi tidak pada laptop, ketika mencoba menghidupkan div menggunakan perintah animasi jquery. Jadi saya memutuskan untuk menggunakan timer yang mengembalikan posisi gulir jendela begitu sering sehingga dengan mata telanjang dokumen akan tampak statis. Solusi ini bekerja dengan sempurna pada perangkat seluler layar kecil seperti Samsung Galaxy-2 atau iphone-5.
Logika Utama dari pendekatan ini : Timer untuk mengatur posisi gulir jendela ke posisi gulir asli harus dimulai sebelum perintah animasi jquery, dan kemudian ketika animasi selesai kita perlu menghapus timer ini (
original scroll position
adalah posisi sebelum animasi dimulai).Saya menemukan kejutan yang menyenangkan bahwa dokumen itu benar-benar tampak statis selama durasi animasi jika interval waktu itu
1 millisecond
, yang saya tuju.SOLUSI LAIN yang berfungsi : Berdasarkan jawaban oleh Mohammad Anini di bawah posting ini untuk mengaktifkan / menonaktifkan pengguliran, saya juga menemukan bahwa versi kode yang dimodifikasi seperti di bawah ini berfungsi.
sumber
Solusi sederhana yang bekerja untuk saya (menonaktifkan pengguliran jendela sementara).
Berdasarkan biola ini: http://jsfiddle.net/dh834zgw/1/
cuplikan berikut (menggunakan jquery) akan menonaktifkan gulir jendela:
Dan di css Anda:
Sekarang ketika Anda menghapus modal, jangan lupa untuk menghapus kelas noscroll pada tag html:
sumber