mescroll/mescroll
Mescroll
mescroll is a JavaScript infinite scroll library and mobile web scroll manager designed to implement pull-to-refresh and pull-up-loading patterns. It provides a system for handling touch-based scrolling, managing pagination states, and integrating these behaviors within Vue applications.
The library distinguishes itself through specialized support for chat interfaces, enabling reverse-order data loading and the ability to inject data in a reverse direction to simulate message histories. It also includes a state-persistent scroll cache to preserve vertical offsets and list data when users navigate between different views.
The project covers a broad range of interaction and performance capabilities, including the suppression of native browser rubber-banding, viewport-aware image lazy loading, and programmatic scroll positioning. It further provides utilities for managing pagination states, customizing loading and empty state UI, and implementing back-to-top navigation.
Features
- Infinite Scrolling - Implements a core infinite scrolling pattern that fetches and appends data when the user reaches the list bottom.
- Mobile Scroll Libraries - Provides a comprehensive JavaScript library for high-performance, touch-optimized scrolling on mobile web environments.
- Local Data Caches - Ships a local data caching mechanism to store retrieved list data and avoid redundant network requests.
- Pagination State Managers - Implements a system to track page numbers and cache list data to maintain pagination state during navigation.
- State-Driven Callbacks - Triggers developer-defined callback functions when scroll offsets reach predefined thresholds for refreshing or loading.
- Scroll Trigger Calculators - Calculates the specific scroll offsets required to trigger the loading of subsequent data pages.
- Pull-to-Refresh & Infinite Scroll - Combines pull-to-refresh and infinite scroll capabilities specifically for mobile web list pagination.
- Pagination State Providers - Tracks current page numbers and manages pagination state to prevent duplicate record loading.
- Pull-to-Refresh Frameworks - Provides the framework for implementing pull-to-refresh gestures that trigger data reloading callbacks.
- Navigation Scroll Restoration - Preserves vertical scroll offsets and data in a persistent cache to restore previous views after navigation.
- Automated Content Loading - Automates the process of fetching and inserting subsequent paginated content into the scroll view.
- Reverse-Chronological Data Loading - Enables fetching and displaying data from the bottom upwards to simulate a chat history.
- Reverse-Direction Content Injections - Enables the injection of history data at the top of the list to simulate a chat interface.
- Automatic Content Pre-fetching - Automatically fetches additional data pages when the initial content is insufficient to fill the viewport.
- Chat Message List Renderers - Provides specialized support for rendering chat message lists with reverse loading and automatic positioning.
- Interaction Locks - Provides mechanisms to temporarily lock and ignore touch events to prevent accidental refresh or load triggers.
- Coordinate-Based Scroll Commands - Implements programmatic scrolling to specific vertical pixel coordinates with optional smooth animation.
- Rubber-Band Effect Suppressors - Prevents native iOS browser bounce to ensure a seamless custom pull-to-refresh user experience.
- Programmatic Scrolling - Enables programmatic movement of the list to specific vertical coordinates with optional smooth animations.
- Native Scroll Interception - Provides the ability to intercept and disable native browser rubber-banding effects for tighter control over the UI.
- Scroll Restoration - Caches vertical offsets and data references to restore a user's previous scroll position after navigating back.
- Interaction Action Locks - Allows developers to temporarily disable pull-to-refresh or pull-up-loading actions to prevent accidental triggers.
- Vue - Offers specific Vue.js component wrappers that integrate pull-refresh and infinite loading logic into declarative components.
- Image Lazy Loading - Defers the loading of images until they intersect with the visible area of the scroll container.
- Mobile Web Performance Frameworks - Optimizes mobile web performance via image lazy loading and persistent scroll state caching.
