모달 대화 상자가 화면보다 길 때 페이지를 스크롤하는 방법은 무엇입니까?

82

내 앱에 y 방향으로 꽤 길어질 수있는 모달 대화 상자가 있습니다. 이로 인해 대화 상자의 일부 내용이 페이지 하단에 숨겨지는 문제가 발생합니다.

여기에 이미지 설명 입력

창 스크롤바가 표시 될 때 대화 상자를 스크롤하고 화면에 맞추기에는 너무 길지만 본체는 모달 뒤에 그대로 둡니다. Trello 를 사용한다면 내가 무엇을 하려는지 알 것입니다.

스크롤바를 제어하기 위해 JavaScript를 사용하지 않고도 가능합니까?

지금까지 모달 및 대화 상자에 적용한 CSS는 다음과 같습니다.

body.blocked {
  overflow: hidden;
}

.modal-screen {
  background: #717174;
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index: 50;
}

.dialog {
  background: #fff;
  position: fixed;
  padding: 12px;
  top: 20%;
  left: 50%;
  z-index: 10000;
  border-radius: 5px;
  box-shadow: 0, 0, 8px, #111;
}
css  scroll 
— 데이비드 투이 테
소스
overflow : auto 또는 overflow : scroll을 대화 상자에서 시도하십시오 ...
— lakshmi priya

답변:

190

그냥 사용 

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

모달을 정렬 한 다음 수직 스크롤을 제공합니다.

— 아 미트 쿠마르 파와 르
소스
7
이것은 받아 들여진 대답이어야합니다. 우아하고 단순합니다.
— brianfit
2
왜 210px를 사용해야합니까? 그 뒤에 특별한 이유가 있습니까?
— ShellZero
9
@ShellZero, 모달 머리글, 모달 바닥 글, 모달과 창 테두리 사이의 위쪽 및 아래쪽 공간의 합계입니다.
— Stalinko
3
바닥 글과 머리글 높이를 하드 코딩하지 않는 솔루션이 있습니까?
— Pavel
2
iOS에서 일반 스크롤처럼 느껴지 길 원한다면 -webkit-overflow-scrolling : touch; 또한 Mobile Safari는 특별히하지 않도록 지시하지 않는 한 일반 페이지 스크롤과 다르게 오버플로 스크롤을 처리하기 때문입니다.
— 아담 Gerthel
38

이것이 나를 위해 고친 것입니다.

max-height: 100%;
overflow-y: auto;

편집 : 이제 모달이 현재 콘텐츠 위에 별도의 페이지처럼 작동하고 스크롤 할 때 모달 뒤의 콘텐츠가 움직이지 않는 트위터에서 현재 사용되는 것과 동일한 방법을 사용합니다.

본질적으로 다음과 같습니다.

var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
$('body').css({
  marginRight: scrollBarWidth,
  overflow: 'hidden'
});
$modal.show();

모달에서이 CSS 사용 :

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;

JSFiddle : https://jsfiddle.net/0x0049/koodkcng/
Pure JS 버전 (IE9 +) : https://jsfiddle.net/0x0049/koodkcng/1/

이것은 페이지 또는 모달 대화 상자의 높이 또는 너비에 관계없이 작동하고, 마우스 / 손가락이 어디에 있든 스크롤을 허용하고, 일부 솔루션은 주요 콘텐츠에서 스크롤을 비활성화하는 흔들리는 점프가 없으며 멋지게 보입니다.

— 0x0049
소스
이것은 OP를 다루는 유일한 답변입니다. 모달이 너무 길 때 페이지를 스크롤하는 방법. 실제로 페이지를 스크롤하지는 않지만 화면의 아래쪽 여백을 사용하여 세로 공간을 차지하지 않으려는 사용 사례에 맞는 페이지를 스크롤하는 환상을 만듭니다. 수락 된 답변을 포함한 다른 모든 솔루션에는 해당 문제가 있습니다.
— Ynot
13

변화 position

position:fixed;
overflow: hidden;

...에

position:absolute;
overflow:scroll;
— bitoshi.n
소스
1
작동하지 않아요. 마치 대화창에 높이가 있다는 것을 창에서 인식하지 못하는 것과 같습니다.
— David Tuite
문제는 position: fixed;그것이 절대적으로 또는 다른 것으로 변경 될 수 있습니까?
— bitoshi.n
2
그렇게하면 다른 문제가 발생합니다. 사용자가 대화 상자를 열 때 이미 페이지 아래로 스크롤 한 경우 현재 창에서 벗어나 페이지 맨 위에 표시됩니다.
— David Tuite
1
이것은 나를 위해 일했습니다-일반 모달과 모달에 모달이있을 때 (Bootstrap은 겹치는 모달이 지원되지 않는다고 말합니다 ... 사용자 정의 코드가 필요합니다 ).
— eggy
이것은 실제로 OP에 대한 정답입니다. 모달을 스크롤하지 않고 페이지를 스크롤하기 때문입니다
— carkod
5

다음은 내용에 맞게 자동 크기 조정되고 창에 맞지 ​​않을 때 스크롤을 시작하는 모달 창의 데모입니다.

모달 창 데모 (HTML 소스 코드의 주석 참조)

모두 HTML과 CSS로만 수행됩니다 . 모달 창을 표시하고 크기를 조정하는 데 JS가 필요하지 않습니다 ( 물론 창을 표시하는 데 여전히 필요합니다 . 새 버전에서는 JS가 전혀 필요하지 않습니다).

업데이트 (더 많은 데모) :

요점은 외부 및 내부 DIV가 있으며 외부 DIV는 고정 위치를 정의하고 내부 DIV는 스크롤을 생성합니다. (데모에는 실제 모달 창처럼 보이게하는 더 많은 DIV가 있습니다.)

        #modal {
            position: fixed;
            transform: translate(0,0);
            width: auto; left: 0; right: 0;
            height: auto; top: 0; bottom: 0;
            z-index: 990; /* display above everything else */
            padding: 20px; /* create padding for inner window - page under modal window will be still visible */
        }

        #modal .outer {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 999;
        }

        #modal .inner {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: auto;       /* allow to fit content (if smaller)... */
            max-height: 100%;   /* ... but make sure it does not overflow browser window */

            /* allow vertical scrolling if required */
            overflow-x: hidden;
            overflow-y: auto;

            /* definition of modal window layout */
            background: #ffffff;
            border: 2px solid #222222;
            border-radius: 16px; /* some nice (modern) round corners */
            padding: 16px;       /* make sure inner elements does not overflow round corners */
        }
— Radek Pech
소스
팝업이 열리면 스크롤을 방지하기 위해 페이지를 잠글 수 있습니까? 사용자가 팝업 외부에 마우스를 가지고 있으면 팝업 대신 페이지를 스크롤하고 팝업이 발생하면 팝업 위로 이동하면 팝업과 페이지 스크롤이 나타납니다. 감사합니다
— Adyyda
@Adyyda 페이지를 DIV로 래핑 overflow:hidden하고 크기를 페이지와 동일하게 설정 margin-top하고 scroll-top.
— Radek Pech
이것은 훌륭하고 적절한 솔루션 인 Radek-반응 형, 크로스 브라우저, 단순히 CSS를 사용하여 수행되었습니다. 시간을 절약 해주었습니다. 감사합니다
— Tremendus Apps 2016
@RadekPech 그게 어떻게 다른 html,body{ overflow:hidden }가요?
— Steven Vachon
@StevenVachon 데모처럼 간단한 페이지와 제한된 수의 지원되는 브라우저에서는 차이가 없을 수 있습니다. 그러나 더 복잡한 페이지 또는 특정 브라우저 설정 html,body{ overflow:hidden }에서는 예상대로 작동하지 않을 수 있습니다. 그래서 그것은 과잉 처럼 보일 수 있지만 미안한 것보다 더 안전합니다 .
— Radek Pech 16.
2

고정 위치 지정만으로도 해당 문제를 해결해야하지만이 문제를 방지하기위한 또 다른 좋은 해결 방법은 모달 div 또는 요소를 사이트 레이아웃이 아닌 페이지 하단에 배치하는 것입니다. 대부분의 모달 플러그인은 사용자가 메인 페이지를 계속 스크롤 할 수 있도록 절대 모달 위치를 지정합니다.

<html>
        <body>
        <!-- Put all your page layouts and elements


        <!-- Let the last element be the modal elemment  -->
        <div id="myModals">
        ...
        </div>

        </body>
</html>
— Chimdi2000
소스
2

여기 .. ​​완벽하게 작동합니다.

.modal-body { 
    max-height:500px; 
    overflow-y:auto;
}
— 에반스 콰치
소스
2

이 CSS를 추가하여 간단하게 할 수 있습니다. 그래서 방금 이것을 CSS에 추가했습니다.

.modal-body {
position: relative;
padding: 20px;
height: 200px;
overflow-y: scroll;
}

작동 중입니다!

— 아시 쿠르 라만
소스
1

position:fixed음, 모달 창이 시점에 상대적으로 고정되어 있음을 의미합니다. 모달 창 자체에 스크롤바를 추가하지 않는 이유를 염두에두고이 시나리오에서 적절하다는 평가에 동의합니다.

그렇다면 정확 max-height하고 overflow속성이 트릭을 수행해야합니다.

— ov
소스
0

결국 모달 화면 뒤의 페이지 내용을 변경하여 페이지를 스크롤 할만큼 오래 걸리지 않도록해야했습니다.

이렇게하면 position: absolute사용자가 더 이상 페이지를 아래로 스크롤 할 수 없기 때문에 대화 상자에 적용 할 때 발생했던 문제 가 해결되었습니다.

— 데이비드 투이 테
소스
당신은 당신의 문제를 생략 한
— 아 미트 쿠마르 Pawar
질문과 답변 게시물 모두 귀하가 답변을 수락하고 여기에 질문을 게시하는 이유는 무엇입니까?
— Thiyagu
2
@ 괜찮다고 생각되는 티 야구. 질문자가 해결책을 찾으면 스스로 답변을 게시해야합니다. 그들은 또한 그들에게 도움이 된 대답을 자유롭게 받아 들일 수 있습니다. 최종 목표는 커뮤니티 전체를 돕는 것입니다.
— 버그
0

모달이 열려있을 때 클릭 할 수있는 창 페이지 스크롤바

이것은 나를 위해 작동합니다. 순수 CSS.

<style type="text/css">

body.modal-open {
padding-right: 17px !important;
}

.modal-backdrop.in {
margin-right: 16px; 

</style>

시도하고 알려주세요

— 자나 다 히루 유키
소스
-1

동적 너비와 높이를 가진 모달 문제에 대한 순수한 CSS 답변을 추가하고 싶었습니다. 다음 코드는 다음 요구 사항에서도 작동합니다.

  1. 화면 중앙에 모달 배치
  2. 모달이 뷰포트보다 높으면 조광기를 스크롤합니다 (모달 콘텐츠 아님).

HTML :

<div class="modal">
    <div class="modal__content">
        (Long) Content
    </div>
</div>

CSS / LESS :

.modal {
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: @qquad;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.7);
    z-index: @zindex-modal;

    &__content {
        width: 900px;
        margin: auto;
        max-width: 90%;
        padding: @quad;
        background: white;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
    }
}

이렇게하면 모달이 항상 뷰포트 내에 있습니다. 모달의 너비와 높이는 원하는만큼 유연합니다. 간단하게 닫기 아이콘을 제거했습니다.

— Karlludwigweise
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.