[CSS] modal body에만 scroll 적용하기

카테고리 없음

[CSS] modal body에만 scroll 적용하기

goakgoak 2022. 4. 1. 10:54

https://starlmh.tistory.com/entry/%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9-modal-%EC%97%90%EC%84%9C-%EB%82%B4%EC%9A%A9-%EB%B6%80%EB%B6%84%EB%A7%8C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B8%B0%EB%8A%A5-%ED%95%98%EA%B8%B0

부트스트랩 modal 에서 내용 부분만 스크롤 기능 하기

부트스트랩 modal 기능을 사용하면서 body 안에 내용이 많을 경우 전체적인 scroll 이 되어서 사용자가 중간에 화면을 닫고 싶을 경우 스크롤을 움직여야 하는 불편한 상황이 발생하여 body 내용 부분

starlmh.tistory.com

https://stackoverflow.com/questions/25874001/how-to-put-scroll-bar-only-for-modal-body

How to put scroll bar only for modal-body?

I have the following element: <div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="overflow-y: scroll; max-

stackoverflow.com

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

이 코드로 modal-body 영역에 scroll을 적용 할 수 있었는데,

modal-body 내 특정 영역에만 scroll을 적용하고 싶다면 해당 div에 위 style 속성을 사용해도 된다.

예)

<div class="modal-body" style="max-height: calc(100vh - 200px); overflow-x: hidden; overflow-y: auto;">

<div class="modal-body">
	<div id="divSearchResult" style="max-height: calc(100vh - 200px); overflow-x: hidden; overflow-y: auto;">
</div> <!-- ./modal-body -->