JScrollpane: Добавить элемент при прокрутке вниз

Question

Я применил JScrollpane к <ul> <li>. Теперь мне нужно добавить еще <li>, когда прокрутите вниз до этого <ul> через ajax.

Любая идея?

ТИА Jaya

Answer 1

Вы должны использовать событие 'JSP-свитка-у'. Это событие запускается, когда пользователь прокручивает строку y. Дополнительная информация о мероприятии here. Поскольку браузеры запускают это событие более одного раза каждый раз, вместо использования обычного jQuery .bind или .on, я использую плагин debug jQuery, чтобы браузеры не запускали функцию более одного раза каждые 200 мс. Вы можете загрузить JQuery debounce here. Так скажем, ваша структура выглядит так:

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

Javascript для достижения этой цели с помощью 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-адресе (это зависит от реализации на сервере).