[javascript] 모달을 열 때 BODY가 스크롤되는 것을 방지

JAVASCRIPT / 글쓴이

내 웹 사이트 에서 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 상기 봐 – 모달 절을 참조하십시오.

답변

허용 된 답변이 모바일 (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;
}

이 답변은 x-post입니다.

답변

본문이 넘치면 본문이 스크롤되지 않습니다. 모달을 숨기면 자동으로 되돌립니다.

코드는 다음과 같습니다.

$('#adminModal').modal().on('shown', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})

답변

overflow : 모달이 열려 있으면 숨겨져 서 본문 크기를 창 크기로 설정해 볼 수 있습니다.

답변

@charlietfl의 답변을 넘어 스크롤 막대를 고려해야합니다. 그렇지 않으면 문서 리플 로우가 나타날 수 있습니다.

모달 열기 :

  1. body폭을 기록
  2. 세트 body에 오버 플로우hidden

  3. 본문 너비를 1 단계의 너비로 명시 적으로 설정하십시오.

    var $body = $(document.body);
var oldWidth = $body.innerWidth();
$body.css("overflow", "hidden");
$body.width(oldWidth);

모달 닫기 :

  1. 세트 body에 오버 플로우auto

  2. 설정 body에 폭auto

    var $body = $(document.body);
$body.css("overflow", "auto");
$body.width("auto");

고무시키는 : http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php

답변

경고 : 아래 옵션은 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');
  });

JSFiddle

답변

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