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

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

---

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

---

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

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

.modal-open {
    overflow: hidden;
}

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

.modal-open {
    overflow: scroll;
}

에서 자신의 CSS.

---

나는 사용했다

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

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

---

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

.modal-open {
  overflow: inherit;
}

---

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 파일을 생성하는 것이 좋습니다.

Do not Alter the css file of bootstrap because it will change everything in your bootstrap once you use it in other parts of your page.

If your page is somewhat long, it will automatically provide a scroll bar. And when the modal opened, it will hide the scroll bar because that's what bootstrap do as a default.

To avoid hiding it when modal is opened, just override it by putting the css code (below) on your own css file.

.modal-open {
    overflow: scroll;
}

just a vice versa...

.modal-open {
    overflow: hidden;
}

---

the bootstrap modal adds a padding once it opens so you can try this code in your own css

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

---

Additionally, if modal popup needs to scroll with content inside and the parent needs to remain still, add the following to your Custom.css (overriding css)

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

참고URL : https://stackoverflow.com/questions/25070144/bootstrap-modal-removes-scroll-bar