프로그래밍/Jquery

jquery - window객체를 활용하며 무한 스크롤 구현하기

가카리 2014. 10. 18. 14:37
반응형

스크롤 이벤트를 통한 무한 스크롤을 구현해보기


윈도우 이벤트는 window 객체에 의해서 구현이 됩니다. 이 객체의 scrollTop값과


height 값을 더한 값이 실제 문서의 높이를 의미하는 document 객체의 height 속성


값이 같으면 즉 스크롤이 Rx까지 도달했다는 의미입니다.


이를 사용하여 무한 스크롤을 구현해보았습니다.




소스


<!DOCTYPE html>

<html>

<head>

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

        <script>

        $(document).ready(function (event){

        $(window).scroll(function(){

        

        var scrollHeight = $(window).scrollTop() + $(window).height();

        var documentHeight = $(document).height();

        

        //스크롤이 맨아래로 갔는지 아닌지 확인하는 if

        if(scrollHeight == documentHeight){

        for(var i = 0; i < 10; i++){

        $('<h1>Infinity Scroll11</h1>').appendTo('body');

        }      

        }

        

        });

        });

        

        //테스트를 위해 내부에 공간을 채워서 스크롤을 임의로 만듬

        $(document).ready(function(){

        for(var i = 0; i < 20; i++){

        $('<h1>infinity scroll</h1>').appendTo('body');

        }      

        });

        

    </script>

</head>

<body>

        <div>

        <p>지금 생각을</p>

        <h1>150</h1>

        <textarea cols="70" rows="5"></textarea>

        </div>

</body>

</html>



실행 화면



스크롤을 내리면 계속 Infinity Scroll11이라는 글자가 생성되는 것을 알 수 있습니다.

반응형