在以下情况下，如何让 Waypoints（Jquery 插件）用于无限滚动？

发布于 2024-12-12 05:30:16 字数 1144 浏览 0 评论 0原文

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

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

结构：

<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时，当我向下滚动时，我无法让它正常工作。

这是我当前关于路径点的 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);

关于如何让它工作的任何想法？

原文

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.

Structure:

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

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.

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蘑菇王子 2024-12-19 05:30:16

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

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% 来触发加载，并检查方向是否向下。

That's what I did on my page:

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

I used 110% to trigger loading before the bottom is reached and checked if the direction is down.

回复收藏 0 原文