JScrollpane：當滾動到底部時添加元素

Question

我已經將JScrollpane應用到<ul> <li>。現在，當通過ajax滾動到<ul>的底部時，現在需要添加更多<li>。

有什麼想法？

TIA 再也

Answer 1

你需要使用 'JSP滾動-Y' 事件。當用戶滾動y條時會觸發此事件。有關事件here的更多信息。由於瀏覽器每次觸發此事件不止一次，而不是使用jQuery的常規.bind或.on，所以我使用jQuery debounce插件來防止瀏覽器每200毫秒觸發一次該函數。你可以下載JQuery debounce here。因此，讓我們說你的結構是這樣的：

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

使用JQuery會渴望實現自己的目標的JavaScript，如：

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中的數據（取決於服務器上的實現）將此頁索引發送到服務器。