모달 열 스크롤에서 방지 BODY

해결법

1.부트 스트랩의 모달 자동으로 모달 오픈 모달 대화 상자가 표시 될 때 몸과 삭제합니다을 클래스 대화 상자가 숨겨져 때 추가합니다. 그러므로 당신은 당신의 CSS에 다음을 추가 할 수 있습니다 :

부트 스트랩의 모달 자동으로 모달 오픈 모달 대화 상자가 표시 될 때 몸과 삭제합니다을 클래스 대화 상자가 숨겨져 때 추가합니다. 그러므로 당신은 당신의 CSS에 다음을 추가 할 수 있습니다 :
```
body.modal-open {
    overflow: hidden;
}
```
당신은 위의 코드를 부트 스트랩 CSS 코드 기반에 속한다는 것을 주장 할 수 있지만,이 사이트에 추가 할 수있는 쉬운 수정 프로그램입니다.

2013 년 2월 8일 업데이트 이것은 이제 트위터 부트 스트랩 V에서 작동이 중지 없다 2.3.0 -. 더 이상 몸에 모달 오픈 클래스를 추가 할 수 있습니다.

해결 방법은 모달이 닫힐 때 모달에 대해 표시 할 때 몸에 클래스를 추가하고 제거하는 것입니다 :
```
$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});
```
업데이트 11 일 2013 년 3 월 모달 오픈 클래스처럼 보인다는 명시 적으로 스크롤을 방지하기위한 목적으로, 부트 스트랩 3.0에 반환합니다 :

모덜 섹션을 확인 - https://github.com/twitter/bootstrap/pull/6342이를 참조하십시오.
2.허용 대답은 (적어도 / 사파리 7 승 아이폰 OS 7) 모바일에서 작동하지 않습니다와 나는 MOAR 자바 스크립트 CSS 할 것 내 사이트에서 실행하지 않습니다.

허용 대답은 (적어도 / 사파리 7 승 아이폰 OS 7) 모바일에서 작동하지 않습니다와 나는 MOAR 자바 스크립트 CSS 할 것 내 사이트에서 실행하지 않습니다.

이 CSS는 모달 아래 스크롤에서 배경 페이지를 방지 할 수 있습니다 :
```
body.modal-open {
    overflow: hidden;
    position: fixed;
}
```
그러나, 그것은 또한 약간의 사이드를-영향이 본질적으로 정상에 스크롤의. 위치 : 절대 리졸이 있지만, 재 소개 모바일 스크롤 할 수있는 능력.

당신이 당신의 뷰포트 알고있는 경우에 (의 <몸>에 뷰포트를 추가 내 플러그인을) 당신은 위치에 대한 CSS를 토글을 추가 할 수 있습니다.
```
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;
}
```
이 대답은 X-게시물입니다.
3.단순히 몸 오버 플로우를 숨기고 그것은 몸이 스크롤하지 있습니다. 당신이 모달을 숨길 때, 자동으로 되돌립니다.

단순히 몸 오버 플로우를 숨기고 그것은 몸이 스크롤하지 있습니다. 당신이 모달을 숨길 때, 자동으로 되돌립니다.

여기에 코드입니다 :
```
$('#adminModal').modal().on('shown', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})
```
4.당신은 오버 플로우와 창 크기에 신체 사이즈 설정을 시도 할 수 : 숨겨진 모달이 열려있을 때

당신은 오버 플로우와 창 크기에 신체 사이즈 설정을 시도 할 수 : 숨겨진 모달이 열려있을 때
5.당신은 그렇지 않으면 당신은 문서 리플 로우를 볼 수 있습니다, 스크롤 바 @ charlietfl의 대답 및 계정을 넘어 이동해야합니다.

당신은 그렇지 않으면 당신은 문서 리플 로우를 볼 수 있습니다, 스크롤 바 @ charlietfl의 대답 및 계정을 넘어 이동해야합니다.

http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php 고무시키는 :
6.경고 : 해당 버전에 스크롤하는 것은 명시 적으로 모달 자체에 국한 되었기 때문에 아래 옵션은 부트 스트랩 v3.0.x 관련이 없습니다. 당신이 비활성화 휠 이벤트 경우에 당신은 실수로 뷰포트의 높이보다 더 큰 높이를 가지고 조동사의 내용을 볼 수 일부 사용자를 방지 할 수 있습니다.

경고 : 해당 버전에 스크롤하는 것은 명시 적으로 모달 자체에 국한 되었기 때문에 아래 옵션은 부트 스트랩 v3.0.x 관련이 없습니다. 당신이 비활성화 휠 이벤트 경우에 당신은 실수로 뷰포트의 높이보다 더 큰 높이를 가지고 조동사의 내용을 볼 수 일부 사용자를 방지 할 수 있습니다.

스크롤 이벤트는 취소 할 수 없습니다. 그러나 마우스 휠과 휠 이벤트를 취소 할 수 있습니다. 큰주의해야 할 점은 모든 기존 브라우저 게코 17.0에서 후자, 모질라 최근에 추가 지원을 지원한다는 것입니다. 나는 전체 확산을 모르겠지만, IE6 + 및 크롬을 지원하지.

여기를 활용하는 방법은 다음과 같습니다
```
$('#myModal')
  .on('shown', function () {
    $('body').on('wheel.modal mousewheel.modal', function () {
      return false;
    });
  })
  .on('hidden', function () {
    $('body').off('wheel.modal mousewheel.modal');
  });
```

7.내가 위로 스크롤 뒷면에 페이지를하지 않았기 때문에, 단지 CSS를 변경하여 크롬에서 작동 할 수 없습니다. 이 가공 한 고급 :

내가 위로 스크롤 뒷면에 페이지를하지 않았기 때문에, 단지 CSS를 변경하여 크롬에서 작동 할 수 없습니다. 이 가공 한 고급 :

$("#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);
});

8.이걸로 해봐:

이걸로 해봐:

.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
    height: 100%;
}

나를 위해 일했다. (지지체 IE8)

9.

/* =============================
 * 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(); });
});

10.

body.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
}

도움이 되었기를 바랍니다...

11.클래스를 추가 또는 자바 스크립트로 body 태그의 스타일을 변경하는 '모달-열린'괜찮 및 가정으로 작동합니다. 그러나 몸이 오버 플로우 될 때 우리가 거의 얼굴 인 문제 : 숨겨진, 그것은 (scrollTop이 0이 될 것이다), 상단으로 이동합니다. 이것은 사용성 문제가 나중에 될 것입니다.

클래스를 추가 또는 자바 스크립트로 body 태그의 스타일을 변경하는 '모달-열린'괜찮 및 가정으로 작동합니다. 그러나 몸이 오버 플로우 될 때 우리가 거의 얼굴 인 문제 : 숨겨진, 그것은 (scrollTop이 0이 될 것이다), 상단으로 이동합니다. 이것은 사용성 문제가 나중에 될 것입니다.

대신 변경 body 태그 오버 플로우의이 문제에 대한 해결책으로 : HTML 태그에 숨겨진 변화를
```
$('#myModal').on('shown.bs.modal', function () {
  $('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
  $('html').css('overflow','auto');
});
```
12.이 코드에 대해 잘 모르겠지만, 그것은 가치가 탄입니다.

이 코드에 대해 잘 모르겠지만, 그것은 가치가 탄입니다.

jQuery를에 :
```
$(document).ready(function() {
    $(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
        $("#Modal").css("overflow", "hidden");
    });
});
```
내가 전에 말했듯이, 나는 100 % 확실하지 않다 어쨌든보십시오.
13.이러한 답변의 대부분의 지역에서 사용되는 솔루션 : 가장 좋은 방법은 CSS 전용 몸 {숨겨진 오버 플로우}입니다. 어떤 대답도 사라지는 스크롤에 의한 "점프"를 방지하는 수정 프로그램을 제공한다; 그러나, 아무도는 너무 우아한 없었다. 그래서, 나는이 두 가지 기능을 쓰고, 그들은 꽤 잘 작동하는 것.

이러한 답변의 대부분의 지역에서 사용되는 솔루션 : 가장 좋은 방법은 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를 확인하십시오.
14.년 11 월 2017으로 크롬은 새로운 CSS 속성을 도입

년 11 월 2017으로 크롬은 새로운 CSS 속성을 도입

동작을 스크롤에 대해 : 포함;

이는 기입으로 크로스 브라우저 지원이 제한되지만이 문제를 해결한다.

자세한 내용 및 브라우저 지원에 대한 링크 아래 참조
15.몸에,하지 작업 (하지 적어도 내 경우에는)가 정상에 웹 사이트 스크롤을 만들 것 때문에 : 많은 사람들이 "숨겨진 오버 플로우"를 제안한다.

몸에,하지 작업 (하지 적어도 내 경우에는)가 정상에 웹 사이트 스크롤을 만들 것 때문에 : 많은 사람들이 "숨겨진 오버 플로우"를 제안한다.

이 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');
    });
```
이 작업에 모달의 스크롤을하고, 동시에 스크롤에서 웹 사이트를 방지 할 수 있습니다.

16.다음과 같은 논리를 사용할 수, 나는 그것을 테스트는 (심지어 IE에서) 작동

다음과 같은 논리를 사용할 수, 나는 그것을 테스트는 (심지어 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>

17.나는 확실히이 부트 스트랩하지만 가치 시도와 함께 작동합니다 100 % 아니에요 - 그것은 GitHub의에서 찾을 수있는 Remodal.js와 함께 일 : http://vodkabears.github.io/remodal/하고 방법에 대한 감각을 만들 것 꽤 유사합니다.

나는 확실히이 부트 스트랩하지만 가치 시도와 함께 작동합니다 100 % 아니에요 - 그것은 GitHub의에서 찾을 수있는 Remodal.js와 함께 일 : http://vodkabears.github.io/remodal/하고 방법에 대한 감각을 만들 것 꽤 유사합니다.

가기 페이지 점프를 중지하고 또한 내용의 오른쪽 시프트를 방지 모달 해고 할 때 몸에 클래스를 추가하고 이러한 CSS 규칙을 설정하려면 :
```
body.with-modal {
    position: static;
    height: auto;
    overflow-y: hidden;
}
```
정적 및 높이 : 자동 오른쪽에있는 내용의 점프를 중지 결합은 위치입니다. 오버 플로우-Y : 숨겨진; 모달 뒤에 스크롤되는 것을 페이지를 중지합니다.
18.이 바이올린을 바탕으로 : http://jsfiddle.net/dh834zgw/1/

이 바이올린을 바탕으로 : 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');
```
19.답변의 슬프게도 아무도 위의 내 문제를 해결하지 않습니다.

답변의 슬프게도 아무도 위의 내 문제를 해결하지 않습니다.

내 상황에서, 웹 페이지는 원래 스크롤 바있다. 내가 모달을 클릭 할 때마다, 스크롤 바는 사라지지 않습니다 헤더는 조금 오른쪽으로 이동합니다.

그럼 난 .modal 오픈 추가하려고 {오버 플로우 : 자동;} (대부분의 사람들이 권장된다). 그것은 참으로 문제를 해결 : 내가 모달를 열고 스크롤 막대가 나타납니다 후. 그러나 또 다른 부작용 "는 조금 왼쪽으로 헤더 아래 배경 모달 뒤에 다른 긴 줄과 함께 이동합니다"라는 어느 나온다

다행히, 내가 추가 한 후 {패딩 오른쪽 :! 0 중요;}, 모든 것이 완벽하게 고정됩니다. 모두 헤더와 본문 배경은 움직이지 않았고 모달은 여전히 스크롤을 유지합니다.

이이 문제가 계속 붙어있는 사람들을 도울 수 있기를 바랍니다. 행운을 빕니다!
20.조각의 대부분은 여기에 있습니다,하지만 난 그 박았을 모두 함께 어떤 답을 볼 수 없습니다.

조각의 대부분은 여기에 있습니다,하지만 난 그 박았을 모두 함께 어떤 답을 볼 수 없습니다.

이 문제는 삼중입니다.

(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 바인딩을 적용합니다.
21.부트 스트랩 3에 대한 내 솔루션 :

부트 스트랩 3에 대한 내 솔루션 :
```
.modal {
  overflow-y: hidden;
}
body.modal-open {
  margin-right: 0;
}
```
나를 위해 유일한 오버 플로우 때문에 : 15 픽셀 다음 body.modal 오픈 클래스에 숨겨져 때문에 원래 마진 오른쪽으로 왼쪽으로 이동에서 페이지를 방지하지 않았다.
22.난 그냥 이런 식으로 일을 ...

난 그냥 이런 식으로 일을 ...
```
$('body').css('overflow', 'hidden');
```
그러나 스크롤 내가 추가 그래서, 모든 것을 바로 20 픽셀 이동 사라진 경우
```
$('body').css('margin-right', '20px');
```
똑바로 후.

나를 위해 작동합니다.

23.모달 / 폭 "mouseenter / 휴가"100 % 높이 인 경우 쉽게 활성화 / 비활성화 스크롤로 작동합니다. 이건 정말 날 위해 일했다 :

모달 / 폭 "mouseenter / 휴가"100 % 높이 인 경우 쉽게 활성화 / 비활성화 스크롤로 작동합니다. 이건 정말 날 위해 일했다 :

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); 
});

24.나는 체크 박스 해킹에 의해 생성 된 사이드 바 있었다. 그러나 주요 아이디어는 문서 scrollTop을 저장하고 창을 스크롤하는 동안 변경하지 않는 것입니다.

나는 체크 박스 해킹에 의해 생성 된 사이드 바 있었다. 그러나 주요 아이디어는 문서 scrollTop을 저장하고 창을 스크롤하는 동안 변경하지 않는 것입니다.

난 그냥 몸이 '숨겨진 오버 플로우'가되는 페이지 점프처럼하지 않았다.

window.addEventListener ( '부하', 함수 () { prevScrollTop = 0을하자; isSidebarVisible이 거짓 =하자; document.getElementById를 ( 'F-오버레이 chkbx').하여 addEventListener ( '변화'(이벤트) => { prevScrollTop = window.pageYOffset || document.documentElement.scrollTop; isSidebarVisible는 = event.target.checked; window.addEventListener ( '스크롤'(이벤트) => { 경우 (isSidebarVisible) { window.scrollTo (0, prevScrollTop); } }); }) });

25.나를 위해 일한

나를 위해 일한

$('#myModal').on({'mousewheel': function(e) 
    {
    if (e.target.id == 'el') return;
    e.preventDefault();
    e.stopPropagation();
   }
});

26.왜 부르마가하는대로 그렇게하지? ! 모달가 활성되면 다음 자신의 클래스가 오버 플로우되는-클립 됐나 HTML로 추가 숨겨진 중요합니다; 그리고 그게 다야.

왜 부르마가하는대로 그렇게하지? ! 모달가 활성되면 다음 자신의 클래스가 오버 플로우되는-클립 됐나 HTML로 추가 숨겨진 중요합니다; 그리고 그게 다야.

편집 : 당신이 같은 다른 일을 추가해야합니다, 그래서 좋아요는, 부르마,이 버그가
```
html.is-modal-active {
  overflow: hidden !important;
  position: fixed;
  width: 100%; 
}
```

27.나를 위해이 문제가 iOS에서 주로 발표 이후, 나는 단지 iOS에서 그 문제를 해결하는 코드를 제공합니다 :

나를 위해이 문제가 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;
    });
  }

28.위의 답변 중 아무도 나를 위해 완벽하게 작동하지 않습니다. 그래서 잘 작동 다른 방법을 발견했다.

위의 답변 중 아무도 나를 위해 완벽하게 작동하지 않습니다. 그래서 잘 작동 다른 방법을 발견했다.

그냥 값의 최신에 문서의 스크롤. (네임 스페이스) 리스너 및 설정 scrollTop을 추가 ...

또한 친한 스크립트에서 리스너를 제거합니다.
```
// 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');

});
```
이 크롬에서 잘 작동하지 않는 것 같다. 어떤 제안은 그것을 해결하기 위해?

29.이것은 나를 위해 일한 :

이것은 나를 위해 일한 :

$("#mymodal").mouseenter(function(){
   $("body").css("overflow", "hidden"); 
}).mouseleave(function(){
   $("body").css("overflow", "visible");
});

30.어떻게 부트 스트랩 3 모달의 스크롤 이벤트를 얻는 방법 궁금 사람들을 위해 :

어떻게 부트 스트랩 3 모달의 스크롤 이벤트를 얻는 방법 궁금 사람들을 위해 :
```
$(".modal").scroll(function() {
    console.log("scrolling!);
});
```

from https://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 업로드 진행 및 AJAX 파일 업로드 (0)	2020.10.12
[JQUERY] 여러 조동사 오버레이 (0)	2020.10.12
[JQUERY] 자바 스크립트 콘솔에서 jQuery를 포함 (0)	2020.10.12
[JQUERY] 어떻게 파일 입력에서 파일의 전체 경로를 얻으려면 [중복] (0)	2020.10.12
[JQUERY] 큰 따옴표 대 jQuery.parseJSON 따옴표 (0)	2020.10.12

복붙노트

[JQUERY] 모달 열 스크롤에서 방지 BODY

모달 열 스크롤에서 방지 BODY

해결법

1.부트 스트랩의 모달 자동으로 모달 오픈 모달 대화 상자가 표시 될 때 몸과 삭제합니다을 클래스 대화 상자가 숨겨져 때 추가합니다. 그러므로 당신은 당신의 CSS에 다음을 추가 할 수 있습니다 :

2.허용 대답은 (적어도 / 사파리 7 승 아이폰 OS 7) 모바일에서 작동하지 않습니다와 나는 MOAR 자바 스크립트 CSS 할 것 내 사이트에서 실행하지 않습니다.

3.단순히 몸 오버 플로우를 숨기고 그것은 몸이 스크롤하지 있습니다. 당신이 모달을 숨길 때, 자동으로 되돌립니다.

4.당신은 오버 플로우와 창 크기에 신체 사이즈 설정을 시도 할 수 : 숨겨진 모달이 열려있을 때

5.당신은 그렇지 않으면 당신은 문서 리플 로우를 볼 수 있습니다, 스크롤 바 @ charlietfl의 대답 및 계정을 넘어 이동해야합니다.

7.내가 위로 스크롤 뒷면에 페이지를하지 않았기 때문에, 단지 CSS를 변경하여 크롬에서 작동 할 수 없습니다. 이 가공 한 고급 :

8.이걸로 해봐:

9.

10.

12.이 코드에 대해 잘 모르겠지만, 그것은 가치가 탄입니다.

14.년 11 월 2017으로 크롬은 새로운 CSS 속성을 도입

15.몸에,하지 작업 (하지 적어도 내 경우에는)가 정상에 웹 사이트 스크롤을 만들 것 때문에 : 많은 사람들이 "숨겨진 오버 플로우"를 제안한다.

16.다음과 같은 논리를 사용할 수, 나는 그것을 테스트는 (심지어 IE에서) 작동

17.나는 확실히이 부트 스트랩하지만 가치 시도와 함께 작동합니다 100 % 아니에요 - 그것은 GitHub의에서 찾을 수있는 Remodal.js와 함께 일 : http://vodkabears.github.io/remodal/하고 방법에 대한 감각을 만들 것 꽤 유사합니다.

18.이 바이올린을 바탕으로 : http://jsfiddle.net/dh834zgw/1/

19.답변의 슬프게도 아무도 위의 내 문제를 해결하지 않습니다.

20.조각의 대부분은 여기에 있습니다,하지만 난 그 박았을 모두 함께 어떤 답을 볼 수 없습니다.

21.부트 스트랩 3에 대한 내 솔루션 :

22.난 그냥 이런 식으로 일을 ...

23.모달 / 폭 "mouseenter / 휴가"100 % 높이 인 경우 쉽게 활성화 / 비활성화 스크롤로 작동합니다. 이건 정말 날 위해 일했다 :

24.나는 체크 박스 해킹에 의해 생성 된 사이드 바 있었다. 그러나 주요 아이디어는 문서 scrollTop을 저장하고 창을 스크롤하는 동안 변경하지 않는 것입니다.

25.나를 위해 일한

26.왜 부르마가하는대로 그렇게하지? ! 모달가 활성되면 다음 자신의 클래스가 오버 플로우되는-클립 됐나 HTML로 추가 숨겨진 중요합니다; 그리고 그게 다야.

27.나를 위해이 문제가 iOS에서 주로 발표 이후, 나는 단지 iOS에서 그 문제를 해결하는 코드를 제공합니다 :

28.위의 답변 중 아무도 나를 위해 완벽하게 작동하지 않습니다. 그래서 잘 작동 다른 방법을 발견했다.

29.이것은 나를 위해 일한 :

30.어떻게 부트 스트랩 3 모달의 스크롤 이벤트를 얻는 방법 궁금 사람들을 위해 :

'JQUERY' 카테고리의 다른 글

티스토리툴바