JScrollpane : 아래쪽으로 스크롤 할 때 요소 추가

Question

<ul> <li>에 JScrollpane을 적용했습니다. 이제 을 추가해야합니다. 아약스를 통해 <ul> 아래로 스크롤하면됩니다.

아이디어가 있으십니까?

TIA 자야

Answer 1

당신은 'JSP로 스크롤-Y'이벤트를 사용해야합니다. 이 이벤트는 사용자가 y 막대를 스크롤 할 때 트리거됩니다. 이벤트 here에 대한 자세한 정보. 브라우저는 jQuery의 일반 .bind 또는 .on을 사용하는 대신 매번이 이벤트를 두 번 이상 트리거하므로 jQuery 디버깅 플러그인을 사용하여 브라우저가 200ms마다 한 번 이상 함수를 실행하지 못하도록합니다. JQuery debounce here을 다운로드 할 수 있습니다. 그럼 당신의 구조는 다음과 같이 말할 수 있습니다 :

<div id="container"> 
    <ul id="list"> 
    <li> ... </li> 
    <li> ... </li> 
    <li> ... </li> 
    </ul> 
</div> 

JQuery와 보일 것이다 사용하여 목표를 달성하기 위해 자바 스크립트와 같은이 시나리오에서는 물론

var container = $('#container'); 
var list = $('#list'); 

// initialize the scroll pane 
container.jScrollPane(); 

// bind the event 
container.debounce('jsp-scroll-y', function(event, scrollPositionY, isAtTop, isAtBottom) { 
    if (isAtBottom) { 
     $.ajax({ 
      type: 'GET', 
      async: true, 
      dataType: 'html', 
      url: '/path/to/more/elements', 
      success: function(data) { 
       if (data.length) { 
        list.append(data); 
        container.jScrollPane('reinitialise'); 
       } else { 
        container.unbind('jsp-scroll-y'); 
       } 
      }, 
     }); 
    } 
}, 200); 

, '/ 경로 /에/더/요소 '는 li 요소를 반환해야하며, 모든 것이 완료되면 아무 것도 반환하지 않습니다. AJAX 성공 함수에서 증가하는 페이지 인덱스를 사용하여 새로운 요소를 얻습니다. ajax 호출 또는 URL (서버의 구현에 따라 다름)의 데이터를 사용하여 서버에이 페이지 색인을 보내야합니다.