Views Infinite Scroll
Provides an infinite scroll pager plugin for Drupal Views, allowing seamless content loading as users scroll or click a "Load More" button.
views_infinite_scroll
Install
composer require 'drupal/views_infinite_scroll:^2.0'
composer require 'drupal/views_infinite_scroll:8.x-1.9'
Overview
Views Infinite Scroll is a powerful Drupal module that enhances the Views module by providing an alternative pager type that implements infinite scrolling functionality. Instead of traditional pagination with numbered pages, this module allows content to be loaded dynamically either automatically as users scroll down the page or manually when they click a customizable "Load More" button.
The module integrates seamlessly with Drupal's AJAX system, appending new content to the existing view without page reloads. It supports various configurations including custom button text with dynamic tokens, automatic content loading on scroll, and the ability to initially load all pages up to a requested page number for better deep-linking support.
Views Infinite Scroll works with any Views display type including pages, blocks, and Entity View Attachment (EVA) views. It maintains proper cache contexts and supports Views exposed filters while providing a smooth user experience for browsing large content collections.
Features
- Infinite scroll pager plugin that replaces standard Views pagination with continuous content loading
- Manual 'Load More' button mode with customizable button text and dynamic token support
- Automatic content loading triggered by scroll position with configurable threshold (200px from bottom)
- Support for dynamic tokens in button text: @next_page_count (items on next page), @remaining_items_count (total remaining), @total (total items)
- Initially load all pages option for deep-linking support (loads all content up to requested page number)
- AJAX-powered content appending without page reloads
- Integration with Views AJAX system and proper cache context handling
- Support for Entity View Attachment (EVA) module views
- jQuery event trigger 'views_infinite_scroll.new_content' for custom JavaScript integrations
- Automatic validation warning when AJAX is not enabled for views using the infinite scroll pager
Use Cases
Infinite scrolling blog or news listing
Create a page view displaying articles or blog posts with infinite scroll enabled. As visitors scroll down, more articles load automatically without page refreshes, providing a seamless reading experience similar to social media feeds. Configure with 'Automatically Load Content' enabled and set items_per_page to control batch sizes.
Product catalog with manual loading
Build an e-commerce product listing where users click 'Load More Products' to see additional items. Use token support in button text like 'Load @next_page_count more products (@remaining_items_count remaining)' to show exactly how many products will load and how many are left.
Deep-linked search results
Enable 'Initially load all pages' for search result pages so that when users share a link to page 3 of results (e.g., ?page=2), all preceding results load as well, giving users complete context and allowing them to scroll up to see earlier results.
Image gallery with lazy loading
Create a media gallery view with automatic infinite scroll. As users browse through images, new batches load seamlessly. Combine with lazy loading image modules for optimal performance with large image collections.
Comments or forum thread pagination
Replace traditional comment pagination with infinite scroll for forum topics or lengthy comment threads. Users can continuously scroll through discussions without losing their place or waiting for page loads.
Custom JavaScript integration
Listen for the 'views_infinite_scroll.new_content' jQuery event to trigger custom JavaScript when new content loads, such as initializing image galleries, attaching event handlers to new elements, or triggering analytics tracking for loaded content.
Tips
- Always enable 'Use AJAX' in the view's Advanced settings when using infinite scroll pager - it's required for the module to function
- Use the @remaining_items_count token in button text to show users how much content remains, helping set expectations
- For views with many pages, consider enabling 'Initially load all pages' only if deep-linking is important, as it can increase initial page load time
- The 'views_infinite_scroll.new_content' jQuery event passes cloned elements, allowing inspection without affecting the DOM
- Test infinite scroll behavior on mobile devices where scroll performance and viewport sizes differ significantly
- When troubleshooting, check browser Network tab to verify AJAX requests are being made to fetch additional pages
- The scroll threshold of 200px provides a good balance between preloading and performance; content loads just before users reach the bottom
Technical Details
Hooks 4
hook_preprocess_views_infinite_scroll_pager
Preprocesses variables for the views infinite scroll pager template. Computes the next page link, sets cache contexts, and configures pager attributes including the automatic loading data attribute.
hook_preprocess_views_view
Adds data attributes and CSS classes to the view's rows wrapper element when infinite scroll pager is active. This wrapper is essential for the JavaScript to identify where to append new content.
hook_preprocess_eva_display_entity_view
Applies the same preprocessing logic as hook_preprocess_views_view for views rendered through the Entity View Attachment (EVA) contributed module.
hook_form_view_edit_form_alter
Validates that AJAX is enabled when editing a view that uses the infinite scroll pager. Displays a warning message if AJAX is disabled since infinite scroll requires it.
Troubleshooting 6
Ensure AJAX is enabled for the view display. Navigate to the view settings and enable 'Use AJAX' under Advanced settings. The module displays a warning if AJAX is disabled when using the infinite scroll pager.
The scroll threshold is set to 200 pixels from the bottom of the pager element. If content height varies significantly, consider using manual 'Load More' mode instead, or implement custom JavaScript to adjust the threshold.
Install and use the EVA (Entity View Attachment) module for embedding views in entities. The module has specific support for EVA views through hook_preprocess_eva_display_entity_view().
Ensure button text contains tokens in the correct format: @next_page_count, @remaining_items_count, or @total. Tokens are case-sensitive and must include the @ prefix.
New content is appended within the .views-infinite-scroll-content-wrapper container. Ensure CSS selectors target elements within this wrapper. The 'clearfix' class is automatically added to handle float-based layouts.
Verify that all library dependencies are loading correctly. The module requires jQuery, Drupal.once, Drupal.debounce, and views.ajax libraries from Drupal core. Check for JavaScript conflicts with other modules.