选择性页面无限滚动

Selective page endless scrolling

我使用以下 javascript 在多个页面上实现了无限滚动,效果很好。

$(document).ready(function() {
  if ($('.pagination').length) {
    $(window).scroll(function() {
      var url = $('.pagination .next_page').attr('href');
      if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {
        $('.pagination').text("Please Wait...");
        return $.getScript(url);
      }
    });
    return $(window).scroll();
  }
});

这放在我的 application.js 文件中。

我刚刚意识到我在其他页面上有一些分页链接,我不希望无休止地滚动,但是它们被替换为 "Please Wait..."

是否可以仅在某些页面或控制器上激活上述代码?

给你的will_paginate一个独特的#id,这样他们就不会都使用.pagination,这就是其他无尽卷轴附加"please wait"的原因。

示例:

<%= will_paginate @posts, :params => {:controller => 'posts', :action => 'index'}, id: "posts_pagination"%>

在这里您还可以看到如何将 will_paginate 委托给某个控制器和操作。

will_paginate doesn't always play ball with adding an #id so you might want to try and add a .class instead:

<%= will_paginate @posts, :params => {:controller => 'posts', :action => 'index'}, class: "posts_pagination"%>

然后在您的 application.js 中 – 将 infinity-script 绑定到 #posts-pagination(如果 #id)或 .posts_pagination(如果 .class)而不仅仅是 .pagination:

收藏 我使用以下 javascript 在多个页面上实现了无限滚动,效果很好。

$(document).ready(function() {
  if ($('.posts-pagination').length) {
    $(window).scroll(function() {
      var url = $('.posts-pagination .next_page').attr('href');
      if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {
        $('.posts-pagination').text("Please Wait...");
        return $.getScript(url);
      }
    });
    return $(window).scroll();
  }
});

您可能想根据您的情况给 url 一个唯一的变量,这样每个无限卷轴就不会获取另一个无限卷轴的 url

只是改变var url = $('.posts-pagination .next_page').attr('href');

至:

var url1 = $('.posts-pagination .next_page').attr('href');

var url2 = $('.comments-pagination .next_page').attr('href');

以此类推

瞧瞧。你可以开始了。