Saya telah mencari solusi jenis "lightbox" yang memungkinkan ini tetapi belum menemukan satu (tolong, sarankan jika Anda tahu ada).
Perilaku yang saya coba buat ulang persis seperti yang Anda lihat di Pinterest saat mengklik gambar. Overlay dapat digulir ( seperti seluruh overlay bergerak ke atas seperti halaman di atas halaman ) tetapi badan di belakang overlay diperbaiki.
Saya mencoba membuat ini hanya dengan CSS ( yaitu div
hamparan di atas seluruh halaman dan badan denganoverflow: hidden
), tetapi tidak mencegah div
dari digulir.
Bagaimana menjaga agar tubuh / halaman tidak bergulir tetapi tetap bergulir di dalam wadah layar penuh?
Jawaban:
Teori
Melihat implementasi situs pinterest saat ini (mungkin akan berubah di masa mendatang), saat Anda membuka overlay, sebuah
noscroll
kelas diterapkan kebody
elemen danoverflow: hidden
diatur, sehinggabody
tidak lagi dapat digulir.Overlay (dibuat on-the-fly atau sudah di dalam halaman dan dibuat terlihat melalui
display: block
, tidak ada bedanya) memilikiposition : fixed
danoverflow-y: scroll
, dengantop
,left
,right
danbottom
sifat set ke0
: gaya ini membuat overlay mengisi seluruh viewport.Bagian
div
dalam overlay malah tepat diposition: static
kemudian scrollbar vertikal yang Anda lihat terkait dengan elemen itu. Hasilnya, konten dapat digulir tetapi hamparan tetap diperbaiki.Ketika Anda menutup zoom, Anda menyembunyikan overlay (via
display: none
) dan kemudian Anda juga bisa menghapusnya sepenuhnya melalui javascript (atau hanya konten di dalamnya, terserah Anda bagaimana menyuntikkannya).Sebagai langkah terakhir Anda juga harus menghapus
noscroll
kelas kebody
(jadi properti overflow kembali ke nilai awal)Kode
(berfungsi dengan mengubah
aria-hidden
atribut overlay untuk menampilkan dan menyembunyikannya dan meningkatkan aksesibilitasnya).Markup
(tombol terbuka)
(tombol overlay dan tutup)
CSS
Javascript (vanilla-JS)
Akhirnya, inilah contoh lain di mana overlay terbuka dengan efek fade-in oleh CSS yang
transition
diterapkan keopacity
properti. Jugapadding-right
diterapkan untuk menghindari reflow pada teks yang mendasarinya ketika scrollbar menghilang.CSS
sumber
div
harus memiliki gaya CSSposition:fixed
, dan dapat digulir vertikal. Saya berhasil menggunakanoverflow-y:auto;
dan untuk pengguliran momentum / inersia iOS, saya tambahkan-webkit-overflow-scrolling:touch;
ke CSS. Saya menggunakandisplay:block;
,,width:100%;
danheight:100%;
CSS untuk memiliki viewport satu halaman penuh.Jika Anda ingin mencegah overscrolling pada ios, Anda dapat menambahkan posisi tetap ke kelas .noscroll Anda
sumber
position:fixed
adalah bahwa itu mengubah ukuran tubuh utama saya. Mungkin itu bertentangan dengan CSS lain, tetapioverflow:hidden
hanya itu yang dibutuhkanJangan gunakan
overflow: hidden;
padabody
. Secara otomatis akan menggulir semuanya ke atas. Tidak perlu JavaScript juga. Manfaatkanoverflow: auto;
. Solusi ini bahkan bekerja dengan Safari seluler:Struktur HTML
Styling
Lihat demo di sini dan kode sumber di sini .
Memperbarui:
Untuk orang-orang yang menginginkan bilah spasi keyboard, halaman atas / bawah berfungsi: Anda harus fokus pada overlay, mis. Mengkliknya, atau secara manual JS memfokuskannya sebelum bagian ini
div
akan merespons keyboard. Sama dengan ketika overlay "dimatikan", karena hanya memindahkan overlay ke samping. Kalau tidak ke browser, ini hanya dua yang normaldiv
dan tidak akan tahu mengapa harus fokus pada salah satu dari mereka.sumber
html, body { height: 100%; }
(seperti pada demo) agar ini berfungsi dengan benar..offset()
nilai untuk perhitungan akan kacau, dll ...overscroll-behavior
Properti css memungkinkan untuk menimpa perilaku gulir overflow default browser ketika mencapai bagian atas / bawah konten.Cukup tambahkan gaya berikut ke overlay:
Saat ini berfungsi di Chrome, Firefox dan IE ( caniuse )
Untuk lebih jelasnya periksa artikel pengembang google .
sumber
overflow-y: scroll
puas dengan kombinasi ini dengan (dari demo Codepen Anda). Poin yang diangkat oleh @pokrishka valid, tetapi dalam kasus saya ini bukan masalah. Bagaimanapun, saya bertanya-tanya apakah implementasi browser akan mencakup detail ini di masa depan. Saya menemukan bahwa, di Firefox, mengubah ukuran browser sehingga modal tidak sesuai dengan layar dan kemudian mengubah ukurannya lagi sehingga itu membuat properti ini berfungsi (yaitu gulir terkandung) bahkan setelah mengubah ukuran ke ukuran penuh - sampai halaman dimuat ulang , paling sedikit.Sebagian besar solusi memiliki masalah sehingga mereka tidak mempertahankan posisi gulir, jadi saya melihat bagaimana Facebook melakukannya. Selain mengatur konten yang mendasari
position: fixed
mereka juga mengatur bagian atas secara dinamis untuk mempertahankan posisi gulir:Kemudian, ketika Anda menghapus overlay lagi, Anda perlu mengatur ulang posisi gulir:
Saya membuat sedikit contoh untuk menunjukkan solusi ini
sumber
Perlu dicatat bahwa kadang-kadang menambahkan "overflow: hidden" ke tag tubuh tidak melakukan pekerjaan. Dalam hal ini, Anda harus menambahkan properti ke tag html juga.
sumber
width: 100%; height: 100%;
Secara umum, jika Anda ingin orang tua (tubuh dalam kasus ini) mencegahnya menggulir ketika seorang anak (overlay dalam kasus ini) menggulir, maka buat anak menjadi saudara kandung orang tua untuk mencegah acara gulir agar tidak menggelembung hingga orang tua. Jika orangtua adalah tubuh, ini membutuhkan elemen pembungkus tambahan:
Lihat Gulir konten DIV tertentu dengan bilah gulir utama peramban untuk melihatnya berfungsi.
sumber
Jawaban yang dipilih benar, tetapi memiliki beberapa keterbatasan:
<body>
di latar belakang<input>
dalam modal akan mengarahkan semua scroll di masa depan<body>
Saya tidak memiliki perbaikan untuk masalah pertama, tetapi ingin memberi penjelasan tentang yang kedua. Yang membingungkan, Bootstrap dulu memiliki masalah keyboard didokumentasikan, tetapi mereka mengklaim itu diperbaiki, mengutip http://output.jsbin.com/cacido/quiet sebagai contoh perbaikan.
Memang, contoh itu berfungsi dengan baik di iOS dengan tes saya. Namun, memutakhirkannya ke Bootstrap terbaru (v4) mematahkannya.
Dalam upaya untuk mencari tahu apa perbedaan di antara mereka, saya mengurangi test case untuk tidak lagi bergantung pada Bootstrap, http://codepen.io/WestonThayer/pen/bgZxBG .
Faktor penentunya aneh. Menghindari masalah keyboard tampaknya mengharuskan yang
background-color
tidak diatur pada root yang<div>
berisi modal dan konten modal harus bersarang di yang lain<div>
, yang dapatbackground-color
diatur.Untuk mengujinya, batalkan komentar pada baris di bawah ini dalam contoh Codepen:
sumber
Untuk perangkat sentuh, coba tambahkan lebar
101vh
transparan 1px lebar, transparan di bungkus overlay. Kemudian tambahkan-webkit-overflow-scrolling:touch; overflow-y: auto;
ke bungkusnya. Trik ini membuat safari seluler berpikir bahwa overlay dapat digulir, sehingga memotong acara sentuh dari tubuh.Ini halaman contoh. Buka di safari seluler: http://www.originalfunction.com/overlay.html
https://gist.github.com/YarGnawh/90e0647f21b5fa78d2f678909673507f
sumber
-webkit-overflow-scrolling:touch;
untuk setiap wadah yang dapat digulir untuk mencegat acara sentuh.Perilaku yang ingin Anda cegah disebut chaining scroll. Untuk menonaktifkannya, atur
pada hamparan Anda di CSS.
sumber
Saya menemukan pertanyaan ini mencoba menyelesaikan masalah yang saya miliki dengan halaman saya di Ipad dan Iphone - body sedang bergulir ketika saya menampilkan div tetap sebagai popup dengan gambar.
Beberapa jawaban bagus, namun tidak ada yang memecahkan masalah saya. Saya menemukan posting blog berikut oleh Christoffer Pettersson. Solusi yang disajikan di sana membantu masalah yang saya miliki dengan perangkat iOS dan itu membantu masalah latar belakang bergulir saya.
Enam hal yang saya pelajari tentang pengguliran gelang karet iOS Safari
Seperti yang disarankan, saya memasukkan poin utama dari posting blog jika tautannya kedaluwarsa.
"Untuk menonaktifkan bahwa pengguna dapat menggulir halaman latar belakang saat" menu terbuka ", dimungkinkan untuk mengontrol elemen apa yang harus digulir atau tidak, dengan menerapkan beberapa JavaScript dan kelas CSS.
Berdasarkan jawaban Stackoverflow ini, Anda dapat mengontrol elemen-elemen dengan penonaktifan penonaktifan tidak boleh melakukan tindakan gulir default ketika peristiwa touchmove terpicu.
Dan kemudian letakkan kelas disable-scrolling di halaman div:
sumber
Anda dapat dengan mudah melakukan ini dengan beberapa css dan JQuery "baru".
Awalnya:
body {... overflow:auto;}
Dengan JQuery, Anda dapat beralih secara dinamis antara 'overlay' dan 'body'. Saat berada di 'tubuh', gunakanSaat menggunakan 'overlay'
JQuery untuk sakelar ('tubuh' -> 'hamparan'):
JQuery untuk sakelar ('overlay' -> 'body'):
sumber
Saya ingin menambahkan jawaban sebelumnya karena saya mencoba melakukan itu, dan beberapa tata letak rusak segera setelah saya memindahkan tubuh ke posisi: diperbaiki. Untuk menghindari itu, saya juga harus mengatur tinggi badan hingga 100%:
sumber
Gunakan HTML berikut:
Kemudian JavaScript untuk mencegat dan berhenti menggulir:
Kemudian untuk mengembalikan semuanya menjadi normal:
$(".page").off("touchmove");
sumber
Jika tujuannya adalah untuk menonaktifkan perangkat seluler / sentuh maka cara paling mudah untuk melakukannya adalah menggunakan
touch-action: none;
.Contoh:
(Contoh tidak berfungsi dalam konteks Stack Overflow. Anda harus membuatnya ulang di halaman yang berdiri sendiri.)
Jika Anda ingin menonaktifkan gulir
#app
wadah, tambahkan sajatouch-action: none;
.sumber
coba ini
sumber
Jika Anda ingin menghentikan body / html, gulir tambahkan sebagai berikut
CSS
HTML
Pada dasarnya, Anda bisa melakukannya tanpa JS.
Gagasan utamanya adalah menambahkan html / tubuh dengan tinggi: 100% dan melimpah: otomatis. dan di dalam hamparan Anda, Anda dapat mengaktifkan / menonaktifkan gulir berdasarkan kebutuhan Anda.
Semoga ini membantu!
sumber
Dalam kasus saya, tidak ada solusi yang berhasil di iPhone (iOS 11.0).
Satu-satunya perbaikan efektif yang berfungsi pada semua perangkat saya adalah yang ini - ios-10-safari-cegah-scrolling-balik-a-fix-overlay-dan-pertahankan-gulir-posisi
sumber
Gunakan kode di bawah ini untuk menonaktifkan dan mengaktifkan bilah gulir.
sumber