Infinite Scroll
Automatically loads more content when scrolling near the bottom of a container. Works naturally with Turbo Frames for seamless Rails integration. Supports auto-load via IntersectionObserver and manual "Load More" button modes.
Preview & Code
_infinite_scroll.html.erb
██
███ █ █████████████████████████
█████████ █ ███████████████████████████████ ████
████████████ █ ██████████████████████████████████ █████████████
████████ █ ██████████████████████████████ ███ ████ ███████
████ █ ██████████████████████████ █████████████
███████████ █ █████████████████████████████████ ████
███████████ █ █████████████████████████████████ █████ ██████
█████ █ ███████████████████████████ ██████
███████████ █ ███████████████████████████ ███
infinite_scroll_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ██████████ █████████ ██████ ██████████
██████ ██████ █ █
████ ███████
██████████ █ █████ ███████ ████████ ███ ██
█████ █ █████ ███████ ████████ ██████ ██
███████████ ███████
████████ █ █████ ████████ ████████ █████ ██
infinite_scroll_component.rb
█ ██████████████████████ ████
█████ ███████████████████████ █ ███████████████████
███ ████████████████ ██████████ ████ █████████████ █████████████ █████████ ███ ████ ███████
█████ ██████ ████████████ ████ ████████████ █████ ██████ █████████ ██████
██████ ██████ ████████████████
████ █ ███
██████████ █ █████████
█████████████ █ ████████████
█████████ █ ████████
infinite_scroll_component.html.erb
████ ███ ████████████████████ ████████████████ ██ ██████████ ██████████████ ████
███ ███████ ████ █████ █████ ███ ████████ ██
████ ██████████████████████████████████████
███ ███████ ██
██████
███ ███████ █████████ ███████ ██ ████████ ██
████ █████████████████████████████████████ ██████████ ███████████████ ████
████ ██████████ ███ ████████████ ██████████████ ████████████████████
███████████
infinite_scroll_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ██████████ █████████ ██████ ██████████
██████ ██████ █ █
████ ███████
██████████ █ █████ ███████ ████████ ███ ██
█████ █ █████ ███████ ████████ ██████ ██
███████████ ███████
████████ █ █████ ████████ ████████ █████ ██
Changelog
- v1.0.0: Initial release with auto and manual modes
Get Full Access
Unlock the source code for this component and all others. One-time payment for lifetime access.
Get Access Now