jquery - JScrollpane：滚动到底部时添加元素

Question

我已将 JScrollpane 应用于. 现在，当通过 ajax滚动到底部时，<ul> <li>我需要添加更多内容。<li><ul>

任何想法？

TIA再也

Answer 1

您需要使用“jsp-scroll-y”事件。当用户滚动 y 栏时触发此事件。有关活动的更多信息，请点击此处。由于浏览器每次触发此事件不止一次，我没有使用 jQuery 的普通 .bind 或 .on，而是使用 jQuery debounce 插件来防止浏览器每 200 毫秒多次触发该函数。您可以在此处下载 JQuery debounce 。所以假设你的结构是这样的：

<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);

当然，在这种情况下，'/path/to/more/elements' 应该返回 li 元素，而当您接收完所有内容后什么也不返回。我使用在 AJAX 成功函数中递增的页面索引来获取新元素。您可以使用 ajax 调用或 URL 中的数据将此页面索引发送到服务器（这取决于服务器上的实现）。