Question

我在页面上有无限滚动的以下功能。看起来，一旦我进入一个触发if语句的页面，我之后去的每个页面都将继续触发滚动处理程序。我知道这是因为每个其他页面都打印了“窗口滚动”。每次我滚动到控制台但不触发＆＃39; if statement true＆＃39;。如何制作它以使window.scroll仅适用于#infinite-scrolling的页面？

function initPagination() {
  var paginate = function(buttonPress) {
    var url = $('.pagination .next_page').attr('href');

    if (buttonPress || (url && $(window).scrollTop() > $(document).height() - $(window).height() - 60)) {
      // TODO - Removing this line was causing duplicates to load so it's worth investigating the cause
      $('.pagination').html('Please Wait...');
      return $.getScript(url);
    }
  };

  if ($('#infinite-scrolling').length) {
    console.log('if statement true');
    $(window).scroll(function() {
      console.log('window scroll');
      paginate(false);
    });
    return $(window).scroll();
  }

  $('#infinite-scrolling-button').on('click', function() {
    $(this).html('Loading...');
    paginate(true);
    $(this).html('Load more');
  });
}

编辑：部分问题可能与turbolinks有关。当我刷新页面时，滚动处理程序似乎不再触发。

Answer 1

当您希望页面自动滚动时，窗口滚动事件侦听器将被设置，但是当页面由于turbolinks的行为而发生更改时，它不会被设置。每当加载新页面时，请尝试使用$(window).unbind("scroll");删除滚动事件。

防止window.scroll处理程序持久化到其他页面

1 个答案: