Saya ingin tubuh saya berhenti bergulir ketika menggunakan roda mouse saat Modal (dari http://twitter.github.com/bootstrap ) di situs web saya dibuka.
Saya sudah mencoba untuk memanggil potongan javascript di bawah ini ketika modal dibuka tetapi tidak berhasil
$(window).scroll(function() { return false; });DAN
$(window).live('scroll', function() { return false; });Harap dicatat bahwa situs web kami tidak mendukung IE6, IE7 + harus kompatibel.
Jawaban:
Bootstrap modalsecara otomatis menambahkan kelas modal-openke tubuh ketika dialog modal ditampilkan dan menghapusnya ketika dialog disembunyikan. Karena itu Anda dapat menambahkan yang berikut ke CSS Anda:
body.modal-open {
overflow: hidden;
}Anda bisa berpendapat bahwa kode di atas adalah milik basis kode Bootstrap CSS, tetapi ini adalah perbaikan yang mudah untuk menambahkannya ke situs Anda.
Pembaruan 8 feb, 2013
Ini sekarang telah berhenti berfungsi di Twitter Bootstrap v. 2.3.0 - mereka tidak lagi menambahkan modal-openkelas ke tubuh.
Solusinya adalah menambahkan kelas ke tubuh ketika modal akan ditampilkan, dan menghapusnya ketika modal ditutup:
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});Perbarui 11 Maret, 2013
Sepertinya modal-openkelas akan kembali di Bootstrap 3.0, secara eksplisit untuk tujuan mencegah gulir:
Reintroduces .modal-open pada tubuh (jadi kita bisa nuke gulir di sana)
Lihat ini: https://github.com/twitter/bootstrap/pull/6342 - lihat bagian Modal .
modal-openakan kembali di Bootstrap 3, jadi ketika diluncurkan, aman untuk menghapus kode di atas.
Jawaban yang diterima tidak berfungsi di ponsel (setidaknya iOS 7 w / Safari 7) dan saya tidak ingin MOAR JavaScript berjalan di situs saya ketika CSS akan melakukannya.
CSS ini akan mencegah halaman latar belakang bergulir di bawah modal:
body.modal-open {
overflow: hidden;
position: fixed;
}Namun, itu juga memiliki sedikit efek samping pada dasarnya bergulir ke atas. position:absolutemengatasi ini tetapi, memperkenalkan kembali kemampuan untuk menggulir di ponsel.
Jika Anda tahu viewport Anda ( plugin saya untuk menambahkan viewport ke<body> ), Anda bisa menambahkan toggle css untuk position.
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}Saya juga menambahkan ini untuk mencegah halaman yang mendasarinya dari melompat ke kiri / kanan ketika menampilkan / menyembunyikan modals.
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}position: fixeddi tubuh.
Cukup sembunyikan body overflow dan itu membuat tubuh tidak menggulir. Saat Anda menyembunyikan modal, kembalikan ke otomatis.
Ini kodenya:
$('#adminModal').modal().on('shown', function(){
$('body').css('overflow', 'hidden');
}).on('hidden', function(){
$('body').css('overflow', 'auto');
})Anda bisa mencoba mengatur ukuran tubuh ke ukuran jendela dengan overflow: disembunyikan ketika modal terbuka
Anda harus melampaui jawaban dan akun @ charlietfl untuk bilah gulir, jika tidak, Anda dapat melihat dokumen reflow.
bodylebarnyabodyoverflow kehiddenSecara eksplisit mengatur lebar tubuh dengan apa yang ada di langkah 1.
var $body = $(document.body);
var oldWidth = $body.innerWidth();
$body.css("overflow", "hidden");
$body.width(oldWidth);bodyoverflow keautoSetel bodylebar keauto
var $body = $(document.body);
$body.css("overflow", "auto");
$body.width("auto");Terinspirasi oleh: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
$body.css("overflow", "auto");di langkah terakhir :)
Peringatan: Opsi di bawah ini tidak relevan dengan Bootstrap v3.0.x, karena menggulir dalam versi tersebut secara eksplisit terbatas pada modal itu sendiri. Jika Anda menonaktifkan acara roda, Anda mungkin secara tidak sengaja mencegah beberapa pengguna melihat konten dalam modals yang memiliki ketinggian lebih tinggi dari tinggi viewport.
Acara gulir tidak dapat dibatalkan. Namun dimungkinkan untuk membatalkan roda mouse dan acara roda . Peringatan besarnya adalah bahwa tidak semua browser lawas mendukungnya, Mozilla baru-baru ini menambahkan dukungan untuk yang terakhir di Gecko 17.0. Saya tidak tahu penyebaran penuh, tetapi IE6 + dan Chrome mendukungnya.
Berikut cara memanfaatkannya:
$('#myModal')
.on('shown', function () {
$('body').on('wheel.modal mousewheel.modal', function () {
return false;
});
})
.on('hidden', function () {
$('body').off('wheel.modal mousewheel.modal');
});overflow:hiddenlebih baik untuk saat ini.
/* =============================
* Disable / Enable Page Scroll
* when Bootstrap Modals are
* shown / hidden
* ============================= */
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function theMouseWheel(e) {
preventDefault(e);
}
function disable_scroll() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', theMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = theMouseWheel;
}
function enable_scroll() {
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', theMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = null;
}
$(function () {
// disable page scrolling when modal is shown
$(".modal").on('show', function () { disable_scroll(); });
// enable page scrolling when modal is hidden
$(".modal").on('hide', function () { enable_scroll(); });
});Tidak dapat membuatnya berfungsi di Chrome hanya dengan mengubah CSS, karena saya tidak ingin halaman tersebut bergulir kembali ke atas. Ini bekerja dengan baik:
$("#myModal").on("show.bs.modal", function () {
var top = $("body").scrollTop(); $("body").css('position','fixed').css('overflow','hidden').css('top',-top).css('width','100%').css('height',top+5000);
}).on("hide.bs.modal", function () {
var top = $("body").position().top; $("body").css('position','relative').css('overflow','auto').css('top',0).scrollTop(-top);
});Untuk Bootstrap , Anda dapat mencoba ini (bekerja
Firefox,ChromedanMicrosoft Edge):
body.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
}Semoga ini membantu...
Menambahkan kelas 'is-modal-open' atau memodifikasi gaya tag tubuh dengan javascript tidak apa-apa dan itu akan berfungsi sebagaimana mestinya. Tetapi masalah yang akan kita hadapi adalah ketika tubuh menjadi meluap: tersembunyi, itu akan melompat ke atas, (scrollTop akan menjadi 0). Ini akan menjadi masalah kegunaan nanti.
Sebagai solusi untuk masalah ini, alih-alih mengubah overflow tag tubuh: sembunyikan dengan tag html
$('#myModal').on('shown.bs.modal', function () {
$('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
$('html').css('overflow','auto');
});Saya tidak yakin tentang kode ini, tetapi patut dicoba.
Di jQuery:
$(document).ready(function() {
$(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
$("#Modal").css("overflow", "hidden");
});
});Seperti yang saya katakan sebelumnya, saya tidak 100% yakin tetapi coba saja.
Pada November 2017 Chrome Memperkenalkan properti css baru
overscroll-behavior: contain;
yang memecahkan masalah ini meskipun pada saat penulisan telah membatasi dukungan lintas browser.
lihat tautan di bawah untuk detail lengkap dan dukungan browser
Solusi terbaik adalah solusi css-only yang body{overflow:hidden}digunakan oleh sebagian besar jawaban ini. Beberapa jawaban menyediakan perbaikan yang juga mencegah "lompatan" yang disebabkan oleh scrollbar yang menghilang; Namun, tidak ada yang terlalu elegan. Jadi, saya menulis dua fungsi ini, dan tampaknya berfungsi dengan baik.
var $body = $(window.document.body);
function bodyFreezeScroll() {
var bodyWidth = $body.innerWidth();
$body.css('overflow', 'hidden');
$body.css('marginRight', ($body.css('marginRight') ? '+=' : '') + ($body.innerWidth() - bodyWidth))
}
function bodyUnfreezeScroll() {
var bodyWidth = $body.innerWidth();
$body.css('marginRight', '-=' + (bodyWidth - $body.innerWidth()))
$body.css('overflow', 'auto');
}Lihat jsFiddle ini untuk melihatnya digunakan.
open modallebar tombol. Chrome pada 8
Banyak yang menyarankan "overflow: hidden" di badan, yang tidak akan berfungsi (setidaknya dalam kasus saya), karena itu akan membuat situs web gulir ke atas.
Ini adalah solusi yang berfungsi untuk saya (baik di ponsel dan komputer), menggunakan jQuery:
$('.yourModalDiv').bind('mouseenter touchstart', function(e) {
var current = $(window).scrollTop();
$(window).scroll(function(event) {
$(window).scrollTop(current);
});
});
$('.yourModalDiv').bind('mouseleave touchend', function(e) {
$(window).off('scroll');
});Ini akan membuat pengguliran modal untuk bekerja, dan mencegah situs web dari menggulir pada saat yang sama.
Anda dapat menggunakan logika berikut, saya mengujinya dan berfungsi (bahkan di IE)
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var currentScroll=0;
function lockscroll(){
$(window).scrollTop(currentScroll);
}
$(function(){
$('#locker').click(function(){
currentScroll=$(window).scrollTop();
$(window).bind('scroll',lockscroll);
})
$('#unlocker').click(function(){
currentScroll=$(window).scrollTop();
$(window).unbind('scroll');
})
})
</script>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button id="locker">lock</button>
<button id="unlocker">unlock</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>Saya tidak 100% yakin ini akan bekerja dengan Bootstrap tetapi patut dicoba - ini bekerja dengan Remodal.js yang dapat ditemukan di github: http://vodkabears.github.io/remodal/ dan masuk akal untuk metode ini menjadi sangat mirip.
Untuk menghentikan melompat halaman ke atas dan juga mencegah pergeseran konten yang tepat, tambahkan kelas ke bodysaat modal dipecat dan setel aturan CSS ini:
body.with-modal {
position: static;
height: auto;
overflow-y: hidden;
}Ini position:staticdan height:autoyang bergabung untuk menghentikan lompatan konten ke kanan. The overflow-y:hidden;berhenti halaman dari menjadi digulir balik modal tersebut.
Berdasarkan biola ini: http://jsfiddle.net/dh834zgw/1/
cuplikan berikut (menggunakan jquery) akan menonaktifkan gulir jendela:
var curScrollTop = $(window).scrollTop();
$('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');Dan di css Anda:
html.noscroll{
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: scroll !important;
z-index: 10;
}Sekarang ketika Anda menghapus modal, jangan lupa untuk menghapus kelas noscroll pada tag html:
$('html').toggleClass('noscroll');overflowseharusnya diatur hidden? +1 meskipun ini bekerja untuk saya (menggunakan hidden).
Saya memiliki bilah sisi yang dihasilkan oleh hack kotak centang. Tetapi ide utamanya adalah untuk menyimpan dokumen scrollTop dan tidak mengubahnya saat menggulir jendela.
Saya hanya tidak suka halaman melompat ketika tubuh menjadi 'meluap: disembunyikan'.
window.addEventListener('load', function() {
let prevScrollTop = 0;
let isSidebarVisible = false;
document.getElementById('f-overlay-chkbx').addEventListener('change', (event) => {
prevScrollTop = window.pageYOffset || document.documentElement.scrollTop;
isSidebarVisible = event.target.checked;
window.addEventListener('scroll', (event) => {
if (isSidebarVisible) {
window.scrollTo(0, prevScrollTop);
}
});
})
});Sayangnya tidak ada jawaban di atas yang memperbaiki masalah saya.
Dalam situasi saya, halaman web awalnya memiliki bilah gulir. Setiap kali saya mengklik modal, bilah gulir tidak akan hilang dan header akan bergerak ke kanan sedikit.
Kemudian saya mencoba menambahkan .modal-open{overflow:auto;}(yang direkomendasikan kebanyakan orang). Memang memperbaiki masalah: bilah gulir muncul setelah saya membuka modal. Namun, efek samping lain yang muncul adalah bahwa "latar belakang di bawah header akan bergerak sedikit ke kiri, bersama dengan bar panjang lain di belakang modal"
Untungnya, setelah saya tambahkan {padding-right: 0 !important;}, semuanya diperbaiki dengan sempurna. Baik header dan latar belakang tubuh tidak bergerak dan modal masih menyimpan scrollbar.
Semoga ini bisa membantu mereka yang masih terjebak dengan masalah ini. Semoga berhasil!
Sebagian besar bagian ada di sini, tetapi saya tidak melihat jawaban yang menyatukan semuanya.
Masalahnya tiga kali lipat.
(1) mencegah gulir halaman yang mendasarinya
$('body').css('overflow', 'hidden')(2) dan hapus bilah gulir
var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)(3) bersihkan saat modal diberhentikan
$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')Jika modal tidak layar penuh maka terapkan .modal binding ke overlay layar penuh.
Saya hanya melakukannya dengan cara ini ...
$('body').css('overflow', 'hidden');Tetapi ketika scroller menghilang itu memindahkan semuanya dengan benar 20px, jadi saya menambahkan
$('body').css('margin-right', '20px');langsung setelah itu.
Bekerja untukku.
Jika modal 100% tinggi / lebar "mouseenter / leave" akan bekerja dengan mudah mengaktifkan / menonaktifkan gulir. Ini benar-benar berhasil bagi saya:
var currentScroll=0;
function lockscroll(){
$(window).scrollTop(currentScroll);
}
$("#myModal").mouseenter(function(){
currentScroll=$(window).scrollTop();
$(window).bind('scroll',lockscroll);
}).mouseleave(function(){
currentScroll=$(window).scrollTop();
$(window).unbind('scroll',lockscroll);
});Mengapa tidak melakukan itu seperti yang dilakukan Bulma? Ketika modal-aktif maka tambahkan ke html kelas mereka .is-terpotong yang melimpah: tersembunyi! Penting; Dan itu saja.
Sunting: Oke, Bulma memiliki bug ini, jadi Anda harus menambahkan juga hal-hal lain seperti
html.is-modal-active {
overflow: hidden !important;
position: fixed;
width: 100%;
}Karena bagi saya masalah ini disajikan terutama di iOS, saya memberikan kode untuk memperbaikinya hanya di iOS:
if(!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)) {
var $modalRep = $('#modal-id'),
startScrollY = null,
moveDiv;
$modalRep.on('touchmove', function(ev) {
ev.preventDefault();
moveDiv = startScrollY - ev.touches[0].clientY;
startScrollY = ev.touches[0].clientY;
var el = $(ev.target).parents('#div-that-scrolls');
// #div-that-scrolls is a child of #modal-id
el.scrollTop(el.scrollTop() + moveDiv);
});
$modalRep.on('touchstart', function(ev) {
startScrollY = ev.touches[0].clientY;
});
}Tidak ada jawaban di atas yang bekerja dengan baik untuk saya. Jadi saya menemukan cara lain yang bekerja dengan baik.
Hanya menambahkan scroll.(namespace)pendengar dan set scrollTopdaridocument ke terbaru dari nilai itu ...
dan juga menghapus pendengar di skrip dekat Anda.
// in case of bootstrap modal example:
$('#myModal').on('shown.bs.modal', function () {
var documentScrollTop = $(document).scrollTop();
$(document).on('scroll.noScroll', function() {
$(document).scrollTop(documentScrollTop);
return false;
});
}).on('hidden.bs.modal', function() {
$(document).off('scroll.noScroll');
});sepertinya, ini tidak berfungsi dengan baik pada chrome. ada saran untuk memperbaikinya?
Ini bekerja untuk saya:
$("#mymodal").mouseenter(function(){
$("body").css("overflow", "hidden");
}).mouseleave(function(){
$("body").css("overflow", "visible");
});