부트 스트랩 모달은 스크롤 막대를 제거합니다.

내 페이지에서 모달보기를 트리거하면 스크롤 막대가 사라집니다. 모달이 움직이거나 사라질 때 배경 페이지가 움직이기 시작하기 때문에 성가신 효과입니다. 그 효과에 대한 치료법이 있습니까?

이것은 기능입니다. 클래스 modal-open는 body모달을 표시 할 때 HTML에 추가되고 숨기면 제거됩니다.

이렇게하면 부트 스트랩 CSS가 다음과 같이 스크롤바가 사라집니다.

.modal-open {
    overflow: hidden;
}

다음을 지정하여이를 재정의 할 수 있습니다.

.modal-open {
    overflow: scroll;
}

에서 자신의 CSS.

모달을 열면 항상 스크롤로 열리기 때문에 상속 이 스크롤 보다 낫다고 생각 하지만 스크롤이 없으면 같은 문제가 발생합니다. 그래서 저는 이렇게합니다.

.modal-open {
  overflow: inherit;
}

나는 사용했다

.modal-open {
  overflow-y: scroll;
}

이 경우 가로 스크롤 막대를 표시하지 않습니다.

overflow-y : scroll을 사용하고 본문에서 패딩을 제거하는 것이 더 낫습니다. 부트 스트랩 모달은 페이지 본문에 패딩을 추가했습니다.

.modal-open {
  overflow:hidden;
  overflow-y:scroll;
  padding-right:0 !important;
}

IE 브라우저 호환 : 기본적으로 동일한 작업을 수행하는 IE 브라우저.

이 게시물을 건너서 하나님 감사합니다! 내 자신의 닫기 링크를 사용하여 창을 닫을 때 스크롤바를 되 돌리는 방법을 찾으려고 머리를 뽑아 내고있었습니다. CSS에 대한 제안을 시도했지만 제대로 작동하지 않았습니다. 읽고 나서

modal-open 클래스는 모달을 표시 할 때 HTML 본문에 추가되고 숨길 때 제거됩니다. -@flup

jquery를 사용하여 해결책을 찾았으므로 다른 사람이 동일한 문제를 가지고 있고 위의 제안이 작동하지 않는 경우를 대비하십시오.

<script>
            jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
 jQuery('body').removeClass('modal-open');
                });
            });
        </script>

저는 Bootstrap 모달의 '기능'을 가지고 놀았습니다. 보인다 .modal클래스가있다overflow-y:auto; 모달 자체가 높게 될 때 모달 래퍼가 자신의 스크롤 막대를 얻을 수 있도록.

항상 스크롤바를 원하는 경우 (디자이너가 자주 사용) 먼저 본문 설정

body {
    overflow-y:scroll;
}

그런 다음 처리 .modal-open

.modal-open .modal {
    overflow-y:scroll; /* Force a navbar on .modal */
}

.modal-open .topnavbar-wrapper {
    padding-right:17px; /* Noticed that right aligned navbar content got overlapped by the .modal scrollbar */
}

이 경우 본문에서 스크롤바를 비활성화 한 상태로 둡니다.

이 페이지의 다른 모든 답변은 계속해서 내 콘텐츠를 뛰어 넘었습니다.

주의!

이 솔루션이 항상 저에게 효과가 있었지만 어제 모달을 드래그 할 수 있고 화면에 맞게 크게 할 때이 수정을 사용하는 데 문제가있었습니다 (세로). position:sticky내가 추가 한 요소 와 관련이있을 수 있습니까?

부 트랩의 특정 부분을 사용자 정의하기 위해 자신의 CSS 파일을 만드는 것이 좋습니다.

페이지의 다른 부분에서 사용하면 부트 스트랩의 모든 내용이 변경되므로 부트 스트랩의 css 파일을 변경하지 마십시오.

페이지가 다소 길면 자동으로 스크롤 막대를 제공합니다. 모달이 열리면 부트 스트랩이 기본값으로 수행하는 작업이므로 스크롤 막대를 숨 깁니다.

모달이 열릴 때 숨기지 않으려면 자신의 CSS 파일에 CSS 코드 (아래)를 넣어 무시하면됩니다.

.modal-open {
    overflow: scroll;
}

그 반대의 경우도 마찬가지입니다 ...

.modal-open {
    overflow: hidden;
}

또한 모달 팝업이 내부 콘텐츠와 함께 스크롤해야하고 부모가 여전히 남아 있어야하는 경우 Custom.css에 다음을 추가합니다 (css 재정의).

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
.modal-open {
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 0 !important;
}

부트 스트랩 모달이 열리면 패딩을 추가하므로이 코드를 자신의 CSS에서 시도 할 수 있습니다.

.modal-open {
    padding: 0 !important;
}

이것은 아마도 첫 번째 모달 (닫 혔을 때)이 본문 요소에서 모달 열기 클래스를 제거하고 두 번째 모달이 모달 열기를 트리거 할 때 다시 추가하지 않기 때문일 수 있습니다.

이 경우 이벤트를 사용하여 모달이 완전히 닫히거나 숨겨져 있는지 확인하고 다른

let modal1 = $('.modal1);
let modal2 = $('.modal2);
$modal1.on('hidden.bs.modal', function (e) {
   $modal2.modal('show');
});

이것은 첫 번째 모달이 닫힐 때까지 기다려서 modal-open이 body에서 제거되고 열릴 때 다시 추가되었는지 확인합니다.

나는 방금이 문제가 있었고이 질문을 발견하면 행동의 원인을 이해하는 데 빠르게 도움이되었습니다. 감사합니다.

그러나 이러한 CSS 해결 방법은 약간 우아하지 않습니다. 즉, 스크롤바를 유지하려는 경우가 아니라면 (그 이유를 생각할 수는 없지만).

기본적으로 Bootstrap은 스크롤바 제거를 보완하기 위해 특정 요소에 패딩 오른쪽을 적용합니다.

따라서 문제가되는 요소 주위에 패딩이 0 인 추가 래퍼를 추가하고이를 대상으로하는 클래스를 이동하기 만하면됩니다.

즉, 이것에서 변경 ...

<div class="fixed-top p-1 bg-dark">
    ...this content will move as padding will be modified...
</div>

... 이에...

<div class="fixed-top p-0 bg-dark">
    <div class="p-1">
        ...this content won't move...
    </div>
</div>