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中的数据（取决于服务器上的实现）将此页索引发送到服务器。