{"id":16872485,"url":"https://github.com/redgoose-dev/rg-infinite-scroll","last_synced_at":"2025-09-08T13:35:48.292Z","repository":{"id":29443003,"uuid":"32979145","full_name":"redgoose-dev/rg-infinite-scroll","owner":"redgoose-dev","description":"스크롤에서 가장 아래쪽으로 내려가면 데이터를 추가로 불러들인다.","archived":false,"fork":false,"pushed_at":"2018-08-27T03:50:00.000Z","size":47,"stargazers_count":5,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T07:36:10.690Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/redgoose-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-27T10:00:54.000Z","updated_at":"2019-06-20T02:54:56.000Z","dependencies_parsed_at":"2022-09-06T18:12:11.818Z","dependency_job_id":null,"html_url":"https://github.com/redgoose-dev/rg-infinite-scroll","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redgoose-dev%2Frg-infinite-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redgoose-dev%2Frg-infinite-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redgoose-dev%2Frg-infinite-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redgoose-dev%2Frg-infinite-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/redgoose-dev","download_url":"https://codeload.github.com/redgoose-dev/rg-infinite-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248381791,"owners_count":21094528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T15:15:03.091Z","updated_at":"2025-04-11T11:10:49.568Z","avatar_url":"https://github.com/redgoose-dev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rg-infinite-scroll\n\n스크롤에서 가장 아래쪽으로 내려가면 데이터를 추가로 불러들이는 jQuery 라이브러리를 사용한 플러그인입니다.  \n버튼으로도 추가로 스크롤 이벤트를 실행할 수 있습니다.  \n\n\n## Demo\n\n- https://lab.redgoose.me/rg-infinite-scroll/demo/demo-load.html\n- https://lab.redgoose.me/rg-infinite-scroll/demo/demo-json.html\n\n\n## Example\n\n먼저 파일 두개를 준비합니다. 예) `main.html, data.html`  \n`main.html`파일은 컨텐츠의 목록이며 이 페이지에서 `data.html`의 내용을 불러옵니다.\n\n### demo.html\n```\n\u003cscript src=\"./src/vendor/jquery-2.1.3.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"./src/js/RGInfiniteScroll.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nvar index = new RGInfiniteScroll($(document), {\n\turl : './data.html?page={page}\u0026param2=value2'\n\t,method : 'load'\n});\n```\n\n위와같은 형식으로 객체를 만들어 사용할 수 있습니다.  \njQuery 플러그인 형식으로 사용하려면 아래와 같이 호출할 수 있습니다.\n\n```\n$(document).rgInfiniteScroll(options);\n```\n\n\n## Options\nRGInfiniteScroll를 사용할때의 필요한 옵션들이 있습니다. 아래 목록을 참고해 주세요.\n\n* __bottomSpace__ {Number} - default: 50  \n스크롤을 내릴때 아래에서 지정한 값 지점에 내려갈때 이벤트가 실행되는지에 대한 값입니다.  \n\n* __url__ {String} - default: null  \n이벤트가 실행될때 호출하는 url주소입니다.  \n주소 중간에 `{page}`키워드를 넣으면 이것이 이벤트 실행할때마다 늘어나는 페이지번호로 변환되어 데이터 페이지를 호출합니다.  \nex) `./data.php?param=value\u0026page={page}` -\u003e `./data.php?param=value\u0026page=1`\n\n* __method__ {String} - default: load (load|ajax)  \n데이터를 가져오는 방식에 대한 선택을 합니다.\n\n   * load : `$('\u003cdiv\u003e').load()` 메서드를 사용하여 페이지에 있는 내용 그대로 가져와서 특정 위치에 붙입니다.\n   * ajax : `$.ajax()` 메서드를 이용하여 이벤트가 일어나면 callback함수를 받아 인자값으로 데이터를 넘겨줍니다.\n\n\n* __startNumber__ {Number} - default: 2  \n위에서 소개한 url옵션 값에서 {page}키워드에 초기로 지정되는 값입니다. 이벤트 호출시 몇페이지부터 부를건지에 대한 값을 정합니다.\n\n* __ajaxOptions__ {Object}  \n$.ajax() 메서드로 통신할때 사용하는 옵션값입니다.\n\n\t* __data__ {String}  \n\turl로 호출할때 같이 날리는 파라메터입니다. ex) `param1=value1\u0026param2\u0026value2`\n\t* __dataType__ {String} default: html (xml|jsons|script|html)  \n\t가져오려는 문서의 타입입니다.\n\t* __complete__ {Function}  \n\t데이터 호출을 성공했을때 실행되는 콜백함수입니다.  \n\t함수에서 return true으로 값을 넘기면 계속 실행이 되고 return false로 넘기면 실행이 되지 않습니다.\n\n\n* __loadOptions__ {Object}  \n$.load()메서드로 실행할때 사용하는 옵션값입니다.\n\n\t* __target__ {$()}  \n\t데이터를 호출하고 얻은 엘리먼트들을 삽입할 위치를 jQuery selector형태로 지정합니다. ex) `$('#list')`\n\t* __selector__ {String}  \n\t호출하는 데이터의 dom에서 가져올 엘리먼트를 선택합니다. ex) `#data li`\n\n\t* __complete__ {Function} function(data) {}  \n\t불러온 데이터가 dom에 들어가고 실행되는 함수입니다.  \n\t함수에서 return true으로 값을 넘기면 계속 실행이 되고 return false로 넘기면 실행이 되지 않습니다.\n\n\n* __loadingAction__ {Function} - default: function(sw) {}  \n로딩에 관한 함수.  \nsw값이 boolean형식으로 출력되는것을 이용하여 로딩전, 로딩후의 행동을 별도로 만들 수 있습니다.\n```\ndefault : function(sw) {\n\tswitch(sw) {\n\t\tcase true:\n\t\t\t// loading...\n\t\t\tbreak;\n\t\tcase false:\n\t\t\t// finish loading\n\t\t\tbreak;\n\t}\n}\n```\n\n\n## Method\n별도의 클릭이벤트나 다른 이벤트를 통하여 RGInfiniteScroll의 이벤트를 제어할 수 있습니다.\n\n#### load( pageNumber )\nurl의 엘리먼트를 불러와 목록에서 추가합니다. 인자값은 페이지번호로 설정할 수 있습니다.\n\n#### ajax( pageNumber )\nurl의 데이터를 불러와 callback함수를 실행합니다.\n\n#### run()\n스크롤 이벤트를 작동합니다.\n\n#### stop()\n스크롤 이벤트를 중단합니다.\n\n#### setPageNumber( pageNumber )\n현재 페이지를 변경합니다.\n\n#### getPageNumber()\n현재 페이지를 가져옵니다. 숫자형으로 반환해줍니다.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredgoose-dev%2Frg-infinite-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fredgoose-dev%2Frg-infinite-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredgoose-dev%2Frg-infinite-scroll/lists"}