在下列情况下，如何获得Waypoints（Jquery插件）以进行无限滚动？

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

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

结构体：

 
 
 /* {messages loaded here} */ 
 /* #waypoint added after messages loaded via appendTo('.viewport-content') */ 
 
  

viewport / viewport-content通过css形成可滚动区域。 我在使用appendTo在初始消息加载后附加了航点，否则航路点位于顶部并被击中。 但是，当我在加载初始消息后使用appendTo时，当我向下滚动时，我无法使其正常工作。

这是关于航点的当前JS：

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

关于如何让它发挥作用的任何想法？

Answer 1

为什么不直接将航点附加到“.viewport-content”并保留“底部视图”选项。 这样，当内容加载时，它会将底部推出视图，当您向下滚动更多时，它会在底部返回视图时再次触发事件。

Answer 2

这就是我在页面上所做的：

 var opts = { offset: '110%', context: '#central-pane .viewport-content' }; $('#waypoint').waypoint(function(event, direction) { alert("You've hit my waypoint! ow!"); $('#messages').append($loading); if(direction === 'down') { messagesLoad(); /* loads more messages via appendTo('#messages') */ } $.waypoints('refresh'); }, opts); 

在达到底部之前，我使用了110％来触发加载，并检查方向是否已关闭。