Tôi muốn cơ thể của tôi ngừng cuộn khi sử dụng con lăn chuột trong khi Modal (từ http://twitter.github.com/bootstrap ) trên trang web của tôi được mở.
Tôi đã cố gắng gọi đoạn javascript bên dưới khi phương thức được mở nhưng không thành công
$(window).scroll(function() { return false; });VÀ
$(window).live('scroll', function() { return false; });Xin lưu ý rằng trang web của chúng tôi đã bỏ hỗ trợ cho IE6, IE7 + cần phải tương thích.
Câu trả lời:
Bootstrap modaltự động thêm lớp modal-openvào phần thân khi hộp thoại phương thức được hiển thị và xóa nó khi hộp thoại bị ẩn. Do đó, bạn có thể thêm phần sau vào CSS của mình:
body.modal-open {
overflow: hidden;
}
Bạn có thể lập luận rằng mã ở trên thuộc về cơ sở mã Bootstrap CSS, nhưng đây là một sửa chữa dễ dàng để thêm nó vào trang web của bạn.
Cập nhật feb thứ 8, 2013
Điều này hiện đã ngừng hoạt động trong Twitter Bootstrap v. 2.3.0 - họ không còn thêm modal-openlớp vào cơ thể.
Một cách giải quyết khác là thêm lớp vào phần thân khi phương thức sắp được hiển thị và loại bỏ nó khi phương thức được đóng:
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});
Cập nhật ngày 11 tháng 3 năm 2013
Có vẻ như modal-openlớp sẽ trở lại trong Bootstrap 3.0, rõ ràng với mục đích ngăn cuộn:
Giới thiệu lại .modal-open trên cơ thể (vì vậy chúng ta có thể nuke cuộn ở đó)
Xem điều này: https://github.com/twitter/bootstrap/pull/6342 - xem phần Modal .
modal-opensẽ trở lại trong Bootstrap 3, vì vậy khi khởi chạy, nó sẽ an toàn để xóa mã trên.
Câu trả lời được chấp nhận không hoạt động trên thiết bị di động (ít nhất là iOS 7 w / Safari 7) và tôi không muốn MOAR JavaScript chạy trên trang web của mình khi CSS sẽ làm.
CSS này sẽ ngăn trang nền cuộn xuống theo phương thức:
body.modal-open {
overflow: hidden;
position: fixed;
}
Tuy nhiên, nó cũng có một tác dụng phụ nhẹ về cơ bản là cuộn lên trên cùng. position:absolutegiải quyết vấn đề này, nhưng giới thiệu lại khả năng cuộn trên thiết bị di động.
Nếu bạn biết chế độ xem của mình ( plugin của tôi để thêm chế độ xem vào<body> ), bạn có thể chỉ cần thêm một chuyển đổi css cho 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;
}
Tôi cũng thêm điều này để ngăn trang bên dưới nhảy sang trái / phải khi hiển thị / ẩn phương thức.
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}
position: fixedphần thân.
Đơn giản chỉ cần che giấu cơ thể tràn và nó làm cho cơ thể không cuộn. Khi bạn ẩn phương thức, hoàn nguyên nó thành tự động.
Đây là mã:
$('#adminModal').modal().on('shown', function(){
$('body').css('overflow', 'hidden');
}).on('hidden', function(){
$('body').css('overflow', 'auto');
})Bạn có thể thử đặt kích thước cơ thể thành kích thước cửa sổ với tràn: ẩn khi chế độ được mở
Bạn cần phải vượt ra ngoài câu trả lời và tài khoản của @ charlietfl cho các thanh cuộn, nếu không bạn có thể thấy một dòng chảy lại tài liệu.
bodychiều rộngbodytrànhiddenHoàn toàn thiết lập chiều rộng cơ thể với những gì nó đã ở bước 1.
var $body = $(document.body);
var oldWidth = $body.innerWidth();
$body.css("overflow", "hidden");
$body.width(oldWidth);bodytrànautoĐặt bodychiều rộng thànhauto
var $body = $(document.body);
$body.css("overflow", "auto");
$body.width("auto");Lấy cảm hứng từ: http://jdsharp.us/jQuery/minute/calculate-scrollbar- thong.php
$body.css("overflow", "auto");ở bước cuối cùng :)
Cảnh báo: Tùy chọn bên dưới không liên quan đến Bootstrap v3.0.x, vì việc cuộn trong các phiên bản đó đã được giới hạn rõ ràng với chính phương thức. Nếu bạn tắt các sự kiện bánh xe, bạn có thể vô tình ngăn một số người dùng xem nội dung ở các chế độ có chiều cao lớn hơn chiều cao của chế độ xem.
Sự kiện cuộn không thể hủy bỏ. Tuy nhiên, có thể hủy bỏ các sự kiện chuột và bánh xe . Nhắc nhở lớn là không phải tất cả các trình duyệt cũ đều hỗ trợ chúng, Mozilla chỉ mới bổ sung hỗ trợ cho phần sau trong Gecko 17.0. Tôi không biết toàn bộ sự lan truyền, nhưng IE6 + và Chrome hỗ trợ họ.
Đây là cách tận dụng chúng:
$('#myModal')
.on('shown', function () {
$('body').on('wheel.modal mousewheel.modal', function () {
return false;
});
})
.on('hidden', function () {
$('body').off('wheel.modal mousewheel.modal');
});overflow:hiddentốt hơn bây giờ.
/* =============================
* 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(); });
});Không thể làm cho nó hoạt động trên Chrome chỉ bằng cách thay đổi CSS, vì tôi không muốn trang cuộn trở lại đầu trang. Điều này làm việc tốt:
$("#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);
});Đối với Bootstrap , bạn có thể thử này (làm việc trên
Firefox,ChromevàMicrosoft Edge):
body.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
}Hi vọng điêu nay co ich...
Thêm lớp 'is-modal-open' hoặc sửa đổi kiểu thẻ body bằng javascript là được và nó sẽ hoạt động như mong muốn. Nhưng vấn đề chúng ta sẽ gặp phải là khi cơ thể trở nên tràn ra: bị ẩn, nó sẽ nhảy lên trên cùng, (scrollTop sẽ trở thành 0). Điều này sẽ trở thành một vấn đề khả năng sử dụng sau này.
Là một giải pháp cho vấn đề này, thay vì thay đổi tràn thẻ cơ thể: ẩn thay đổi nó trên thẻ html
$('#myModal').on('shown.bs.modal', function () {
$('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
$('html').css('overflow','auto');
});Tôi không chắc chắn về mã này, nhưng nó đáng để thử.
Trong jQuery:
$(document).ready(function() {
$(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
$("#Modal").css("overflow", "hidden");
});
});Như tôi đã nói trước đây, tôi không chắc chắn 100% nhưng dù sao cũng phải thử.
Kể từ tháng 11 năm 2017, Chrome đã giới thiệu một thuộc tính css mới
overscroll-behavior: contain;
giải quyết vấn đề này mặc dù khi viết có giới hạn hỗ trợ trình duyệt chéo.
xem các liên kết dưới đây để biết chi tiết đầy đủ và hỗ trợ trình duyệt
Giải pháp tốt nhất là giải pháp chỉ css body{overflow:hidden}được sử dụng bởi hầu hết các câu trả lời này. Một số câu trả lời cung cấp một bản sửa lỗi cũng ngăn chặn "bước nhảy" gây ra bởi thanh cuộn biến mất; Tuy nhiên, không ai là quá thanh lịch. Vì vậy, tôi đã viết hai chức năng này và chúng dường như hoạt động khá tốt.
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');
}Kiểm tra jsFiddle này để xem nó được sử dụng.
open modalnút. Chrome vào ngày 8
Nhiều người đề xuất "tràn: ẩn" trên cơ thể, sẽ không hoạt động (ít nhất là trong trường hợp của tôi), vì nó sẽ làm cho trang web cuộn lên trên cùng.
Đây là giải pháp phù hợp với tôi (cả trên điện thoại di động và máy tính), sử dụng 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');
});Điều này sẽ làm cho việc cuộn chế độ hoạt động và ngăn trang web cuộn cùng một lúc.
Bạn có thể sử dụng logic sau, tôi đã thử nghiệm và nó hoạt động (ngay cả trong 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>Tôi không chắc chắn 100% điều này sẽ hoạt động với Bootstrap nhưng đáng để thử - nó hoạt động với Remodal.js có thể tìm thấy trên github: http://vodkabears.github.io/remodal/ và nó có ý nghĩa đối với các phương thức khá giống nhau
Để ngăn trang nhảy lên trên cùng và cũng ngăn sự dịch chuyển đúng của nội dung, hãy thêm một lớp vào bodykhi chế độ được kích hoạt và đặt các quy tắc CSS này:
body.with-modal {
position: static;
height: auto;
overflow-y: hidden;
}Đó là position:staticvà height:autokết hợp để ngăn chặn việc nhảy nội dung sang phải. Việc overflow-y:hidden;dừng trang không thể cuộn phía sau phương thức.
Dựa trên câu đố này: http://jsfiddle.net/dh834zgw/1/
đoạn mã sau (sử dụng jquery) sẽ vô hiệu hóa cuộn cửa sổ:
var curScrollTop = $(window).scrollTop();
$('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');Và trong css của bạn:
html.noscroll{
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: scroll !important;
z-index: 10;
}Bây giờ khi bạn xóa phương thức, đừng quên xóa lớp noscroll trên thẻ html:
$('html').toggleClass('noscroll');overflowđược đặt thành hidden? +1 mặc dù điều này làm việc cho tôi (sử dụng hidden).
Tôi đã có một thanh bên được tạo ra bởi hack hộp kiểm. Nhưng ý tưởng chính là lưu tài liệu scrollTop và không thay đổi nó trong khi cuộn cửa sổ.
Tôi chỉ không thích trang nhảy khi cơ thể trở nên 'tràn: ẩn'.
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);
}
});
})
});Đáng buồn thay, không có câu trả lời nào ở trên khắc phục vấn đề của tôi.
Trong tình huống của tôi, trang web ban đầu có một thanh cuộn. Bất cứ khi nào tôi nhấp vào phương thức, thanh cuộn sẽ không biến mất và tiêu đề sẽ di chuyển sang phải một chút.
Sau đó, tôi đã cố gắng để thêm .modal-open{overflow:auto;}(mà hầu hết mọi người đề nghị). Nó thực sự đã sửa các vấn đề: thanh cuộn xuất hiện sau khi tôi mở phương thức. Tuy nhiên, một hiệu ứng phụ khác xuất hiện đó là "nền bên dưới tiêu đề sẽ di chuyển sang bên trái một chút, cùng với một thanh dài khác phía sau phương thức"
May mắn thay, sau khi tôi thêm {padding-right: 0 !important;}, mọi thứ đã được sửa chữa hoàn hảo. Cả tiêu đề và nền cơ thể đều không di chuyển và phương thức vẫn giữ thanh cuộn.
Hy vọng điều này có thể giúp những người vẫn còn mắc kẹt với vấn đề này. Chúc may mắn!
Hầu hết các tác phẩm đều ở đây, nhưng tôi không thấy bất kỳ câu trả lời nào đặt tất cả cùng nhau.
Vấn đề là gấp ba lần.
(1) ngăn cuộn trang bên dưới
$('body').css('overflow', 'hidden')(2) và xóa thanh cuộn
var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)(3) dọn dẹp khi phương thức bị loại bỏ
$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')Nếu phương thức không phải là toàn màn hình thì hãy áp dụng các ràng buộc .modal cho lớp phủ toàn màn hình.
Tôi chỉ làm theo cách này ...
$('body').css('overflow', 'hidden');Nhưng khi thanh cuộn biến mất, nó di chuyển mọi thứ đúng 20px, vì vậy tôi đã thêm
$('body').css('margin-right', '20px');ngay sau nó
Làm việc cho tôi.
Nếu phương thức là 100% chiều cao / chiều rộng, "mouseenter / left" sẽ hoạt động để dễ dàng bật / tắt cuộn. Điều này thực sự hiệu quả với tôi:
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);
});Tại sao không làm điều đó như Bulma không? Khi phương thức được kích hoạt, sau đó thêm vào html lớp của họ .is-clipped đó là tràn: hidden! Quan trọng; Và đó là nó.
Chỉnh sửa: Okey, Bulma có lỗi này, vì vậy bạn cũng phải thêm những thứ khác như
html.is-modal-active {
overflow: hidden !important;
position: fixed;
width: 100%;
}Vì đối với tôi, sự cố này được trình bày chủ yếu trên iOS, tôi cung cấp mã để khắc phục chỉ có trên 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;
});
}Không có câu trả lời nào ở trên làm việc hoàn hảo cho tôi. Vì vậy, tôi tìm thấy một cách khác mà hoạt động tốt.
Chỉ cần thêm một scroll.(namespace)người biết lắng nghe và bộ scrollTopcủa documentđến mới nhất của giá trị của nó ...
và cũng loại bỏ người nghe trong kịch bản gần gũi của bạn.
// 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');
});có vẻ như, điều này không hoạt động tốt trên chrome. Bất kỳ đề nghị để sửa chữa nó?
Điều này làm việc cho tôi:
$("#mymodal").mouseenter(function(){
$("body").css("overflow", "hidden");
}).mouseleave(function(){
$("body").css("overflow", "visible");
});