티스토리 뷰

제이쿼리

스크롤 페이징 (무한 스크롤 Infinite Scroll)

sosohot 2018. 3. 30. 22:31 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>무한 스크롤 예제</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <style>
    body { 
      margin: 0px;
      padding: 0px;
    }
    .big-box {
      width: 100%;
      background-color: gray;
      height: 100vh;
      border-top: 1px solid black;
    }
  </style>
</head>
<body>
  <div class="big-box"><h1>Page 1</h1></div>
  <div class="big-box"><h1>Page 2</h1></div>
  
  <script>
    var page = 2;

    $(window).scroll(function() {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
          console.log(++page);
          $("body").append('<div class="big-box"><h1>Page ' + page + '</h1></div>');

        }
    });
  </script>
</body>
</html>


위 예제 확인하기

https://jsbin.com/yalaleboho/edit?html,output

저작자표시

'제이쿼리' 카테고리의 다른 글

제이쿼리UI Datepicker  (0) 2020.07.24
브라우저 및 사용환경 체크  (0) 2017.01.04
튤팁  (0) 2017.01.04
jQuery로 ::after ::before css 속성 제어하기  (0) 2017.01.04
tree 메뉴  (0) 2017.01.04
댓글