在以下情况下，如何使Waypoint(Jquery插件)可用于无限滚动? [英] How do I get Waypoints (Jquery plugin) to work for infinite scroll in the following case?

问题描述

我正在使用Waypoints Jquery插件: http://imakewebthings.github.com/jquery -waypoints/#documentation

I am using the Waypoints Jquery plugin: http://imakewebthings.github.com/jquery-waypoints/#documentation

我的问题是，我想在到达航路点时动态加载内容.最初，内容是动态加载的，然后我要在最后一个航路点...到达航路点时，我想在它前面加载更多内容，等等.

My issue is that I want to load content dynamically when the waypoint is reached. Initially, content is loaded dynamically, then I want the waypoint at the end... when the waypoint is reached, I want to load more content in front of it, etc.

结构:

<div class="viewport">
  <div class="viewport-content">
    <div id="messages">
      /* {messages loaded here} */
    </div>
    /* #waypoint added after messages loaded via appendTo('.viewport-content') */
    <div id="waypoint"></div> 
  </div>
</div>

视口/视口内容通过CSS形成可滚动区域.加载初始消息后，我使用appendTo附加了航路点，否则航路点在顶部并被击中.但是，在加载初始消息后使用appendTo时，向下滚动时无法正常工作.

The viewport/viewport-content form the scrollable region via css. I was using the appendTo to append the waypoint after the initial messages had loaded, otherwise the waypoint was at the top and was hit. However, when I use the appendTo after loading the initial messages, when I scroll down, I can't get it to work properly.

这是我目前关于航路点的JS:

Here is my current JS in regards to the waypoint:

var opts = {
    offset: 'bottom-in-view',
    context: '#central-pane .viewport-content',
};

$('#waypoint').waypoint(function(event, direction) {
    alert("You've hit my waypoint! ow!");
    $('#messages').append($loading);
    messagesLoad(); /* loads more messages via appendTo('#messages') */
    $('#waypoint').waypoint(opts);
}, opts);

关于如何使它工作的任何想法?

Any ideas on how I can get this to work?

推荐答案

为什么不将航路点附加到".viewport-content"并保留"bottom-in-view"选项.这样，当内容加载时，它会将底部推出视图，而当您向下滚动时，它将在底部回到视图时再次触发该事件.

Why don't you just attach the waypoint to the ".viewport-content" and keep the "bottom-in-view" option. That way when the content gets loaded it pushes the bottom out of view and when you scroll down more it will fire the event again when the bottom is back in view.

这篇关于在以下情况下，如何使Waypoint(Jquery插件)可用于无限滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！