[Jmlee] mCustomScrollbar Scroll paging (infinite scrolling) ***
▦ 프로그램/└ Script, JQuery 2020. 10. 27. 09:20/**
* malihu-custom-scrollbar-plugin-master-3.1.5 기준
* examples 내 여러가지 예제를 참고하고,
* Scroll paging 의 경우 infinite_scroll_example.html 참조할 것
*/
<link rel="stylesheet" type"text/css" href="<%=CP%>/css/.../jquery.mCustomScrollbar.css" />
<script type="text/javascript" src="<%=CP%>/js/..../jquery.mCustomScrollbar.concat.min.js"></script>
<script>
// mCustomScrollbar 는
// 기본적으로 해당 영역 데이터가 변경될 경우
// 별도 destory 등 호출할 필요 없이 자동 적용됨
function fetchDataList() {
// Ajax 로 데이터 리로딩 시 스크로바 이동 및 이동속도
$('#dataList').mCustomScrollbar('scrollTo', 'top', {scrollInertia: 0});
// 데이터 초기화
$('#dataList .mCSB_container').html('');
...
// 데이터 리로딩
var sb = new irgs.StringBuilder();
for (var i = 0; i < xxx; i++) {
sb.append('<div>');
sb.append(' <ul>');
sb.append(' <li>...</li>');
sb.append(' </ul>');sb.append('</div>');
}
$('#dataList .mCSB_container').html(sb.toString());
}
// on ready
$(function() {
$('#dataList').mCustomScrollbar({
theme: 'dark',
scrollInertia: 100, /* 스크롤 반응속도. 이 값을 높게 줄 경우 Scroll paging (infinite scrolling) 시 반응속도가 늦어진다 */
callbacks: {
onScroll: funtion() { ... },
...
},
onTotalScroll: function() {
fetchDataList();
},
onTotalScrollOffset: 100, /* scroll paging (infinite scrolling) 시 하단부 접근영역 */
alwaysTriggerOffsets: false /* scroll paging (infinite scrolling) 하단부 접근영역 시 무한반복 호출 방지 */
});
});
</script>
<div id="dataList" style="height: 800px;">
</div>