Problem/Motivation

We use this module on a travel site and it works great on most pages.
We use the Infinite Scroll Pager option with Automatically Load Content ticked.

On some pages however, for reasons we don't understand, the module immediately initiates the loading of the next page of Views results even before the user has scrolled or moved their mouse cursor.
Then when the next page is loaded, it continues to load another Views page, and another, and another, until all pages are loaded.
All the time the user makes no mouse gesture whatsoever.
The screen does not auto-scroll either while additional results are auto-loaded.

Steps to reproduce

We were unable to reliably pinpoint under what exact conditions this happens. We just know it does, sometimes.
Debugging the JS we found that the top of the pager element, pager.offset().top, expressed in pixels was always the same low number (294px), page after page, after page. This would explain why the auto-loading never stops.

Proposed resolution

We found that by removing one line from the js/infinite-scroll.js file, the module started behaving as expected on ALL our pages that have infinite scroll.
Patch attached to the comment below.

CommentFileSizeAuthor
#18 fix-infinite-loading-without-scroll-3207098-18.patch1.13 KBrenukakulkarni
#17 fix-infinite-loading-without-scroll-3207098-17.patch939 bytesrenukakulkarni
#8 stop-immediate-autoloading-3207098-8.patch389 bytesoheller
#2 stop-immediate-autoloading-3207098-2.patch574 bytesrdeboer

Comments

RdeBoer created an issue. See original summary.

rdeboer’s picture

rdeboer
Location Melbourne
commented
StatusFileSize
new stop-immediate-autoloading-3207098-2.patch574 bytes

One-line patch attached:

A side-effect of the solution is that the "Button text" (default "Load more") as set in the Views UI is briefly visible as the user scrolls towards the bottom of the page. But we actually like that! We changed the text via the Views UI to Loading more...as that is exactly what happens that moment.
Alternatively, if you do not wish to see any text or bullet-list symbol, you could enter a space as "Button text" in the Views UI and use CSS to set list-style-type: none

ul.js-pager__items.pager {
  list-style-type: none;
}

Note that display: none on the pager element may interfere with correct operation.

rdeboer’s picture

rdeboer
Location Melbourne
commented
Issue summary: View changes
rdeboer’s picture

rdeboer
Location Melbourne
commented
Issue summary: View changes
rdeboer’s picture

rdeboer
Location Melbourne
commented
Assigned: rdeboer » Unassigned
Issue summary: View changes
Status: Active » Needs review
attheshow’s picture

attheshow commented

We're seeing the same issue on version 1.8. Unfortunately the patch didn't seem to resolve the situation for us. Downgrading to 1.7 resolves the issue.

oheller’s picture

oheller commented

We are using the views_infinite_scroll with Drupal 9's media library.

In infinite-scroll.js ln:96 `if (isLoadNeeded()){ $window.trigger(scrollEvent); });` creates the loop that continues to load all the items. When I comment out the `if (isLoadNeeded()){ $window.trigger(scrollEvent); });` I no longer load all the items without scrolling.

Patch to follow.

oheller’s picture

oheller commented
StatusFileSize
new stop-immediate-autoloading-3207098-8.patch389 bytes

Patch removing the if(isLoadNeeded()){ $window.trigger(scrollEvent) });

attheshow’s picture

attheshow commented
Status: Needs review » Reviewed & tested by the community

Patch #8 is working for us.

mattdeckerio’s picture

mattdeckerio commented

I applied this patch but found that it didn't work for me.

Further investigation revealed that the vertical positioning of [data-drupal-views-infinite-scroll-pager="automatic"] is what is used to determine if more results need to be loaded. In my case, this selector was appearing at the top of the view due to Drupal core's .visually-hidden which uses absolute positioning.

I moved this selector to the bottom of the view via css and the infinite scrolling now works as designed.

[data-drupal-views-infinite-scroll-pager="automatic"] { bottom: 0; }
davisa’s picture

davisa commented

#10 comment was useful and fixed it for me when used together with a patch. Thanks.

rdworianyn’s picture

rdworianyn commented

The patch in #8 and the CSS in #10 appear to correct the issue, but only when logged in. For anonymous usage, it still continues to scroll automatically. The reason that I found for this was that the views for logged in users typically contain the .contextual-region class as a wrapper for the view.

Since pager.offset().top looks for the closest parent element with a relative or absolute position, it will normally just work for anyone that has the contextual regions, since those have a default relative position.

To make this work for anonymous users, I just added a relative position to the view's parent element and then everything started working exactly as expected.

Hope this helps someone else with this issue or makes it easy to create a patch and correct this globally.

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Status: Reviewed & tested by the community » Postponed (maintainer needs more info)

Is this still an issue with 2.0.x? If yes, please update the version and set the status active again with clear steps or (best) with a test showing what's broken. In this case it might require a reroll as MR.
2.0.x is the active development branch.

If nobody replies, we should assume this is fixed and close this issue outdated.

Thanks!

bobi-mel’s picture

bobi-mel commented

The issue is relevant in version 2.0.x. Fixed the bug using the patch in #8 and the CSS in #10.

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Version: 8.x-1.8 » 2.0.x-dev
Parent issue: » #3376481: [META] Add setting for scroll behavior (position, treshold, delay)
Related issues: +#2950901: Allow setting scroll threshold and delay, +#3329060: Add settings to additionally focus on a new appearing element, +#2856902: Scroll page to new elements inserted after click.

Please prepare a MR against 2.0.x and also see the related issues. Perhaps that should be better solved combined.

Adding this to the META issue for that reason.

briangervais’s picture

briangervais commented

The patch in #8 fixed the issue for us. The CSS in #10 wasn't needed in our case.

renukakulkarni’s picture

renukakulkarni commented
StatusFileSize
new fix-infinite-loading-without-scroll-3207098-17.patch939 bytes

The attached patch https://www.drupal.org/files/issues/2025-04-04/fix-infinite-loading-with... has been tested with the latest version of the module (2.0.3) and fixes the following issues:

  • Loading of results immediately without scrolling.
  • Loading is triggered only when scrolling reaches the bottom.
  • Prevents unwanted triggering during normal scrolling.
renukakulkarni’s picture

renukakulkarni commented
StatusFileSize
new fix-infinite-loading-without-scroll-3207098-18.patch1.13 KB
ivan.vujovic’s picture

ivan.vujovic
Primary language Serbo-Croatian
commented

Any patches removing this block of code:

if (isLoadNeeded()) {
  $window.trigger(scrollEvent);
}

will undo the change that was done for https://www.drupal.org/project/views_infinite_scroll/issues/2916926.

Instead, I approve the CSS solutions suggested in comment #10.

In my case, these CSS fixes did the job:

[data-drupal-views-infinite-scroll-pager="automatic"] {
  clear: both;
}
[data-drupal-views-infinite-scroll-pager="automatic"].visually-hidden {
  position: relative !important;
}