내 웹 사이트 에서 Modal ( http://twitter.github.com/bootstrap )을 여는 동안 마우스 휠을 사용할 때 몸이 스크롤을 멈추기를 원합니다 .
모달이 열렸을 때 아래의 자바 스크립트를 호출하려고했지만 성공하지 못했습니다.
$(window).scroll(function() { return false; });과
$(window).live('scroll', function() { return false; });우리 웹 사이트에서 IE6에 대한 지원이 중단되었으므로 IE7 +는 호환되어야합니다.
답변:
부트 스트랩 은 모달 대화 상자가 표시되면 본문에 modal클래스 modal-open를 자동으로 추가 하고 대화 상자가 숨겨지면 제거합니다. 따라서 CSS에 다음을 추가 할 수 있습니다.
body.modal-open {
overflow: hidden;
}위의 코드는 Bootstrap CSS 코드베이스에 속한다고 주장 할 수 있지만 사이트에 추가하기 쉬운 수정입니다.
2013 년 2 월 8 일 업데이트
이제 Twitter Bootstrap v. 2.3.0에서 작동이 중지되었으며 더 이상 modal-open본문에 클래스가 추가되지 않습니다 .
해결 방법은 모달이 표시 될 때 본문을 클래스에 추가하고 모달이 닫힐 때 클래스를 제거하는 것입니다.
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});2013 년 3 월 11 일 업데이트modal-open 스크롤을 방지하기 위해 클래스가 Bootstrap 3.0에서 반환되는
것처럼 보입니다 .
몸에 .modal-open을 다시 도입합니다 (그래서 스크롤을 할 수 있습니다)
이 참조 https://github.com/twitter/bootstrap/pull/6342 상기 봐 - 모달 절을 참조하십시오.
modal-openBootstrap 3에서 반환되므로 시작되면 위 코드를 제거하는 것이 안전합니다.
허용 된 답변이 모바일 (iOS 7 w / Safari 7 이상)에서 작동하지 않으며 CSS가 실행될 때 내 사이트에서 MOAR JavaScript를 실행하고 싶지 않습니다.
이 CSS는 배경 페이지가 모달에서 스크롤되는 것을 방지합니다.
body.modal-open {
overflow: hidden;
position: fixed;
}그러나 본질적으로 맨 위로 스크롤하는 약간의 부작용이 있습니다. position:absolute이 문제를 해결하지만 모바일에서 스크롤하는 기능을 다시 소개합니다.
뷰포트 ( 뷰포트를 추가하기위한 플러그인)를<body> 알고 있다면 에 대한 CSS 토글을 추가 할 수 있습니다 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;
}또한 모달을 표시하거나 숨길 때 기본 페이지가 왼쪽 / 오른쪽으로 점프하지 않도록 이것을 추가합니다.
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}position: fixed몸 이 없으면 작동하지 않습니다 .
본문이 넘치면 본문이 스크롤되지 않습니다. 모달을 숨기면 자동으로 되돌립니다.
코드는 다음과 같습니다.
$('#adminModal').modal().on('shown', function(){
$('body').css('overflow', 'hidden');
}).on('hidden', function(){
$('body').css('overflow', 'auto');
})overflow : 모달이 열려 있으면 숨겨져 서 본문 크기를 창 크기로 설정해 볼 수 있습니다.
@charlietfl의 답변을 넘어 스크롤 막대를 고려해야합니다. 그렇지 않으면 문서 리플 로우가 나타날 수 있습니다.
body폭을 기록body에 오버 플로우hidden본문 너비를 1 단계의 너비로 명시 적으로 설정하십시오.
var $body = $(document.body);
var oldWidth = $body.innerWidth();
$body.css("overflow", "hidden");
$body.width(oldWidth);body에 오버 플로우auto설정 body에 폭auto
var $body = $(document.body);
$body.css("overflow", "auto");
$body.width("auto");고무시키는 : http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
$body.css("overflow", "auto");마지막 단계에 있어야합니다 :)
경고 : 아래 옵션은 Bootstrap v3.0.x와 관련이 없습니다. 해당 버전의 스크롤은 모달 자체에 명시 적으로 제한되어 있기 때문입니다. 휠 이벤트를 비활성화하면 일부 사용자가 뷰포트 높이보다 높은 높이의 모달로 콘텐츠를 보지 못하게 될 수 있습니다.
스크롤 이벤트는 취소 할 수 없습니다. 그러나 마우스 휠 및 휠 이벤트 를 취소 할 수 있습니다. 가장 큰 경고는 모든 레거시 브라우저가이를 지원하지는 않는다는 것입니다. Mozilla는 최근 Gecko 17.0에서 후자를 지원합니다. 나는 전체 스프레드를 모르지만 IE6 +와 Chrome은 그것들을 지원합니다.
활용 방법은 다음과 같습니다.
$('#myModal')
.on('shown', function () {
$('body').on('wheel.modal mousewheel.modal', function () {
return false;
});
})
.on('hidden', function () {
$('body').off('wheel.modal mousewheel.modal');
});overflow:hidden지금은 더 좋습니다.
/* =============================
* 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(); });
});페이지를 맨 위로 스크롤하지 않기 때문에 CSS 만 변경하면 Chrome에서 작동하지 않습니다. 이것은 잘 작동했습니다 :
$("#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);
});클래스 'is-modal-open'을 추가하거나 javascript로 body 태그 스타일을 수정하는 것은 괜찮으며 예상대로 작동합니다. 그러나 우리가 직면 할 문제는 몸이 넘칠 때입니다 : 숨겨지면 맨 위로 이동합니다 (scrollTop은 0이됩니다). 이것은 나중에 유용성 문제가 될 것입니다.
이 문제에 대한 해결책으로 body 태그 overflow : hidden 대신 HTML 태그에서 변경하십시오.
$('#myModal').on('shown.bs.modal', function () {
$('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
$('html').css('overflow','auto');
});이 코드는 확실하지 않지만 한 번 볼만한 가치가 있습니다.
jQuery에서 :
$(document).ready(function() {
$(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
$("#Modal").css("overflow", "hidden");
});
});전에 말했듯이 100 % 확신 할 수는 없지만 어쨌든 시도하십시오.
2017 년 11 월 현재 Chrome에서 새로운 CSS 속성을 도입했습니다
overscroll-behavior: contain;
작성시 크로스 브라우저 지원이 제한되어 있지만이 문제를 해결합니다.
자세한 내용 및 브라우저 지원은 아래 링크를 참조하십시오
가장 좋은 해결책은 body{overflow:hidden}이러한 답변 대부분이 사용 하는 CSS 전용 솔루션입니다. 일부 답변은 사라지는 스크롤 막대로 인한 "점프"를 방지하는 수정 사항을 제공합니다. 그러나 아무도 너무 우아하지 않았다. 그래서 저는이 두 가지 기능을 작성했는데 꽤 잘 작동하는 것 같습니다.
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');
}이 jsFiddle 을 확인하여 사용 중인지 확인하십시오 .
open modal단추의 너비와 같습니다. Chrome on 8
많은 사람들이 본문에 "오버플로 : 숨겨 짐"을 제안합니다. 웹 사이트가 맨 위로 스크롤되도록하기 때문에 작동하지 않습니다 (최소한의 경우는 아님).
이것은 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');
});이렇게하면 모달 스크롤이 작동하고 웹 사이트가 동시에 스크롤되지 않습니다.
다음 논리를 사용할 수 있고 테스트했으며 작동합니다 (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>나는 확실히이 부트 스트랩하지만 가치 시도와 함께 작동합니다 100 % 아니에요 - 그것은 GitHub의에서 찾을 수있는 Remodal.js와 함께 일 : http://vodkabears.github.io/remodal/ 하고 방법에 대한 감각을 만들 것 꽤 비슷합니다.
페이지가 맨 위로 이동하는 것을 중지하고 컨텐츠의 올바른 이동을 방지 body하려면 모달이 실행될 때 클래스를 추가하고 다음 CSS 규칙을 설정하십시오.
body.with-modal {
position: static;
height: auto;
overflow-y: hidden;
}그것은을의 position:static와 height:auto결합하여 그 오른쪽에있는 컨텐츠의 점프를 중지합니다. 는 overflow-y:hidden;모달 뒤에 스크롤되는 것을 페이지를 중지합니다.
이 바이올린을 기반으로 : http://jsfiddle.net/dh834zgw/1/
다음 스 니펫 (jquery 사용)은 창 스크롤을 비활성화합니다.
var curScrollTop = $(window).scrollTop();
$('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');그리고 당신의 CSS에서 :
html.noscroll{
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: scroll !important;
z-index: 10;
}이제 모달을 제거 할 때 html 태그에서 noscroll 클래스를 제거하는 것을 잊지 마십시오.
$('html').toggleClass('noscroll');overflow로 설정 하지 않아야 hidden합니까? +1이 (나를 사용하여 hidden) 효과가 있었지만 .
체크 박스 해킹으로 생성 된 사이드 바가 있습니다. 그러나 주요 아이디어는 문서 scrollTop을 저장하고 창을 스크롤하는 동안 변경하지 않는 것입니다.
본문이 'overflow : hidden'이 될 때 페이지 점프가 마음에 들지 않았습니다.
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);
}
});
})
});슬프게도 위의 답변 중 어느 것도 내 문제를 해결하지 못했습니다.
내 상황에서 웹 페이지에는 원래 스크롤 막대가 있습니다. 모달을 클릭 할 때마다 스크롤 막대가 사라지지 않고 헤더가 약간 오른쪽으로 이동합니다.
그런 다음 추가하려고했습니다 .modal-open{overflow:auto;}(대부분의 사람들이 권장). 실제로 문제를 해결했습니다. 모달을 연 후에 스크롤 막대가 나타납니다. 그러나 또 다른 부작용은 "모달 뒤에 다른 긴 막대와 함께 머리글 아래의 배경이 약간 왼쪽으로 움직입니다"라는 것입니다.
다행히도을 추가 {padding-right: 0 !important;}하면 모든 것이 완벽하게 고정됩니다. 머리글과 본문 배경이 모두 움직이지 않았고 모달은 여전히 스크롤 막대를 유지합니다.
이것이 여전히이 문제에 갇힌 사람들을 도울 수 있기를 바랍니다. 행운을 빕니다!
대부분의 조각이 여기에 있지만 그것을 모두 합치는 대답을 보지 못했습니다.
문제는 세 가지입니다.
(1) 기본 페이지의 스크롤 방지
$('body').css('overflow', 'hidden')(2) 스크롤 막대를 제거
var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)(3) 모달이 닫힐 때 청소
$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')모달이 전체 화면이 아닌 경우 .modal 바인딩을 전체 화면 오버레이에 적용하십시오.
모달이 100 % 높이 / 너비 인 경우 "mouseenter / leave"는 스크롤을 쉽게 활성화 / 비활성화합니다. 이것은 정말 나를 위해 일했다 :
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);
});나 에게이 문제는 주로 iOS에서 제공되므로 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;
});
}위의 답변 중 어느 것도 나를 위해 완벽하게 작동하지 않았습니다. 그래서 잘 작동하는 다른 방법을 찾았습니다.
그냥 추가 scroll.(namespace)청취자와 세트 scrollTop의를document 그것의 가치를 최신으로 ...
또한 닫기 스크립트에서 리스너를 제거하십시오.
// 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');
});크롬에서 제대로 작동하지 않는 것 같습니다. 그것을 고칠 어떤 제안?
이것은 나를 위해 일했다 :
$("#mymodal").mouseenter(function(){
$("body").css("overflow", "hidden");
}).mouseleave(function(){
$("body").css("overflow", "visible");
});