(slimscroll) div overflow시 스크롤 처리

웹사이트 개발시 특정 영역만 지정하여 스크롤을 넣고 싶은 경우가 있는데, 이런 경우 단순히 overflow:auto 로 처리하게되면

스크롤바의 생성 여부에 따라 화면크기가 달라지는 문제가 발생합니다.

Jquery 기반의 slimscroll 은 투명한 스크롤 아이콘으로 영역을 잡아먹지 않고 지정해주기때문에 좋은 대안이 될 것 같습니다.

- github 다운로드 -

사용 예:

1 . slimscroll.js 를 로딩합니다.

  - <script type="text/javascript" src="jquery.slimscroll.min.js"></script>

2. 스크립트로 적용 영역을 지정합니다.

  - $("#div1").slimScroll({ height: "200px" });

저같은 경우엔 layer popup 에서 이용하고 있는데, 특성상 내부 크기가 가변적으로 적용되어야합니다.

max-height 기반으로 응용한다면 아래와 같이 처리가 가능합니다.

$(window).resize(function () {

$("#divModal_body").css({ "max-height": ($(window).height() - 150) + "px" }); //창크기가 변경되는 경우에 맞춰 max-height 를 조정합니다.

$("#divModal_body").slimScroll({height: ""});

});

$(window).resize(); //modal 창 로딩이 끝나는 경우  resize 이벤트를 발생시킵니다.