選擇性頁面無限滾動

Question

我已經使用下面的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文件中。

我剛剛意識到，我在其他頁面上有一些分頁鏈接，我不希望無休止地滾動，但是這些鏈接已被“請稍候...”代替。

是否可以僅在某些頁面或控制器上激活以上代碼？

Answer 1

給您的will_paginate一個唯一的#id使它們不都使用.pagination ，這就是其他無盡滾動添加“請稍候”的原因。

例：

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

在這里，您還將看到如何將will_paginate委派給某個控制器和操作。

will_paginate並不總是在添加#id情況下發揮#id因此您可能想嘗試添加.class ：

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

然后在您的application.js –將無窮腳本綁定到#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');

等等。

和瞧。 你很好