모달 내에서 콘텐츠 스크롤을 활성화하는 방법은 무엇입니까?

모달 내에서 콘텐츠 스크롤을 활성화하는 방법은 무엇입니까?

---

Twitter Bootstrap을 사용하여 만든 모달 상자에 많은 텍스트를 넣으려고하지만 문제가 있습니다. 해당 콘텐츠가 스크롤을 거부합니다.

overflow:scroll및 추가를 시도 overflow-y:scroll했지만 아무 소용이 없습니다. 실제로 스크롤을 활성화하지 않고 스크롤 막대를 표시하게합니다.

그 원인은 무엇이며 어떻게해야합니까?

---

Bootstrap.css에서 배경 속성 (변경 position에서 모달의) fixed에을absolute

---

Bootstrap 3에서는 css클래스 를 변경해야 합니다..modal

before (부트 스트랩 기본값) :

.modal {

    overflow-y: auto;
}

이후 (편집 후) :

.modal {

    overflow-y: scroll;
}

---

이 답변에는 실제로 UX 경고 와 실제 솔루션의 두 부분이 있습니다 .

UX 경고

모달이 너무 많이 포함되어 스크롤해야하는 경우 모달을 사용해야하는지 자문 해보십시오. 기본적으로 부트 스트랩 모달의 크기는 시각적 정보가 얼마나 적합해야하는지에 대한 꽤 좋은 제약입니다. 만드는 것에 따라 새 페이지 또는 마법사를 대신 선택할 수 있습니다.

실제 솔루션

위치 : http://jsfiddle.net/ajkochanowicz/YDjsE/2/

이 솔루션은 또한 당신의 높이를 변경 할 수 .modal는 AND이 .modal-body필요한 경우 수직 스크롤과 함께 남은 공간 차지합니다.

최신 정보

Bootstrap 3에서는 넘쳐나는 콘텐츠를 더 잘 처리하기 위해 모달이 리팩터링되었습니다. 뷰포트 아래로 흐를 때 모달 자체를 위아래로 스크롤 할 수 있습니다.

---

내가 올바르게 기억한다면, overflow : hidden on the body 설정은 내가 모바일 사이트 용으로 만든 모달 라이브러리를 테스트하고 있던 모든 브라우저에서 작동하지 않았습니다. 특히, 오버플로 : 숨김을 바디에 넣어도 모달 스크롤링 외에 바디 스크롤을 막는 데 어려움이있었습니다.

내 현재 사이트의 경우 이와 같은 작업을 끝냈습니다. 기본적으로 페이지 본문에서 "overflow"를 "hidden"으로 설정하는 것 외에도 현재 스크롤 위치를 저장 한 다음 모달이 닫힌 후 스크롤 위치를 복원합니다. 하나가 이미 활성화되어있는 동안 다른 부트 스트랩 모달이 열릴 때 조건이 있습니다. 그렇지 않으면 나머지 코드는 자명해야합니다. 본문의 overflow : hidden이 주어진 브라우저에서 창을 스크롤하는 것을 막지 않는 경우 최소한 종료시 원래 스크롤 위치를 다시 설정합니다.

function bindBootstrapModalEvents() {
    var $body = $('body'),
        curPos = 0,
        isOpened = false,
        isOpenedTwice = false;
    $body.off('shown.bs.modal hidden.bs.modal', '.modal');
    $body.on('shown.bs.modal', '.modal', function () {
        if (isOpened) {
            isOpenedTwice = true;
        } else {
            isOpened = true;
            curPos = $(window).scrollTop();
            $body.css('overflow', 'hidden');
        }
    });
    $body.on('hidden.bs.modal', '.modal', function () {
        if (!isOpenedTwice) {
            $(window).scrollTop(curPos);
            $body.css('overflow', 'visible');
            isOpened = false;
        }
        isOpenedTwice = false;
    });
}

이것이 마음에 들지 않으면 다른 옵션은 max-height 및 overflow : auto를 .modal-body에 다음과 같이 할당하는 것입니다.

.modal-body {
  max-height:300px;
  overflow:auto;
}

이 경우 화면 크기에 따라 최대 높이를 구성하고 화면 크기에 따라 overflow : auto를 남겨 둘 수 있습니다. 모달 머리글, 바닥 글 및 본문이 화면 크기보다 더 많지 않도록해야하므로 해당 부분을 계산에 포함하겠습니다.

---

modal-body모달 오버레이에서 완벽한 스크롤을 얻으려면 전체 모달이 아닌 높이를 설정하십시오 . 다음과 같이 작동합니다.

.MyModal {
    height: 450px;
    overflow-y: auto;
}

여기에서 요구 사항에 따라 높이를 설정할 수 있습니다.

---

이것이 내가 순전히 일부 클래스를 재정의하는 CSS로 한 방법입니다.

.modal {
  height: 60%;

  .modal-body {
    height: 80%;
    overflow-y: scroll;
  }
}

도움이되기를 바랍니다.

---

skrollr와 함께 부트 스트랩 모달을 사용할 때 모달은 스크롤 할 수 없게됩니다.

터치 이벤트 전파 중지 문제가 해결되었습니다.

$('#modalFooter').on('touchstart touchmove touchend', function(e) {
    e.stopPropagation();
});

자세한 내용은 # skrollr-body 내부 요소에 스크롤 이벤트 추가를 참조하세요.

---

실제로 Bootstrap 3의 경우 body의 .modal-open 클래스도 재정의해야합니다.

    body.modal-open, 
    .modal-open 
    .navbar-fixed-top, 
    .modal-open 
    .navbar-fixed-bottom {
     margin-right: 15px; /*<-- to margin-right: 0px;*/
    }

---

iPhone6의 Mobile Safari에서이 문제가 발생합니다.

부트 스트랩 .modal-open은 모달이 열릴 때 바디에 클래스 를 추가합니다 .

나는 Bootstrap 3.2.0에 최소한의 재정의를 시도했으며 다음과 같은 결과를 얻었습니다.

.modal-open {
    position: fixed;
}

.modal {
    overflow-y: auto;
}

비교를 위해 아래에 관련된 부트 스트랩 스타일을 포함했습니다.

bootstrap / less / modals.less에서 선택한 추출 (수정 사항에 포함하지 마십시오) :

// Kill the scroll on the body
.modal-open {
  overflow: hidden;
}

// Container that the modal scrolls within
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  -webkit-overflow-scrolling: touch;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

사용 된 모바일 Safari 버전 : User-Agent Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4

---

나는 같은 문제가 있었고 아래와 같은 해결책을 찾았습니다.

$('.yourModalClassOr#ID').on('shown.bs.modal', function (e) {
    $(' yourModalClassOr#ID ').css("max-height", $(window).height());
    $(' yourModalClassOr#ID ').css("overflow-y", "scroll");          /*Important*/
    $(' yourModalClassOr#ID ').modal('handleUpdate');

});

100 % 작동합니다.

---

.modal-body {
    max-height: 80vh;
    overflow-y: scroll;
}

그것은 나를 위해 작동합니다

---

이 모든 솔루션을 사용한 후에도 마우스 스크롤을 사용하여 스크롤 할 수 없었고 키보드 위 / 아래 버튼이 콘텐츠 스크롤을 위해 작동했습니다.

그래서 아래에 CSS 수정을 추가하여 작동하도록했습니다.

.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    **pointer-events: auto;**
}

Added pointer-events: auto; to make it mouse scrollable.

---

I was able to overcome this by using the "vh" metric with max-height on the .modal-body element. 70vh looked about right for my uses.

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}

---

Bootstrap will add or remove a css "modal-open" to the <body> tag when we open or close a modal. So if you open multiple modal and then close arbitrary one, the modal-open css will be removed from the body tag.

But the scroll effect depend on the attribute "overflow-y: auto;" defined in modal-open

---

Solution 1: You can declare .modal{ overflow-y:auto} or .modal-open .modal{ overflow-y:auto} if you are using below 3v of bootstrap (for upper versions it is already declared).

Bootstrap adds modal-open class to body in order to remove scrollbars in case modal is shown, but does not add any class to html which also can have scrollbars, as a result the scrollbar of html sometimes can be visible too, to remove it you have to set modal show/hide events and add/remove overflow:hidden on html. Here how to do this.

$('.modal').on('hidden.bs.modal', function () {
   $('html').css('overflow','auto');
}).on('shown.bs.modal', function () {
   $('html').css('overflow','hidden');
});

---

Solution 2: As modal has functionality keys, the best way to handle this is to fix height of or even better connect the height of modal with height of the viewport like this -

.modal-body {
     overflow:auto; 
     max-height: 65vh;
}

With this method you also do not have to handle body and html scrollbars.

Note 1: Browser support for vh units.

Note 2: As it is proposed above. If you change .modal{position:fixed} to .modal{position:absolute}, but in case page has more height than modal user can scroll too much up and modal will disappear from viewport, this is not good for user experience.

참고URL : https://stackoverflow.com/questions/7508576/how-to-enable-scrolling-of-content-inside-a-modal