Question

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

有什么想法吗？

TIA 再也

Answer 1

您需要使用'jsp-scroll-y'事件。当用户滚动y条时触发此事件。有关活动here的更多信息。由于浏览器每次多次触发此事件，而不是使用jQuery的普通.bind或.on，我使用jQuery debounce插件来阻止浏览器每200ms多次触发该函数。你可以下载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);

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

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

1 个答案: