Web

자바스크립트 스크롤바 생성

남자두부 2016. 7. 29. 15:21
반응형

원인


게시판을 팝업 형식(이하 윈도우창)으로 띄울 때 height를 768px로 맞추어 띄웠다.

게시글은 기본적으로 10개씩 보여지는데 상단의 검색창에서 게시글을 최대 20개까지 보여지게 할 수 있다.

이때 게시글이 팝업창 높이를 벗어나 잘려보이게 되는 문제가 발생했다.


분석


어떠한 경우에도 윈도우창의 높이가 항상 768px로 나온다.

그래서 스크롤바를 오토로 설정해놓으면 게시글이 페이지를 벗어나도 인식을 하지 못했다.


결과


게시판에서 게시글 수를 파라미터로 보내주도록 만들어져있다.

검색을 누르면 페이지가 리로드 되기 때문에 게시글 수에 대한 파라미터 값을 가져올 수 있다.

이때 파라미터 값을 체크해 10 이상이면 강제로 스크롤바를 생성했다.


1


원하는 위치에서 사용한다.


1
2
3
4
5
6
7
<script type="text/javascript">
    window.onload = function () {
        if($('#value').val() > 10) {
            window.document.body.scroll = "auto";
        }
    }
</script>
cs

해석

창이 열리면 함수가 작동된다.
그렇기 때문에 게시글 수에 대해 설정하고 버튼을 누르게 되면 이 스크립트를 통과하게 된다.
조건문에서 $('#value').val() 는 폼을 통해 내보낸 파라미터 값을 말한다.
값이 10보다 크면 창에 스크롤바를 생성하라는 함수가 작동한다.


반응형