mescroll/mescroll
Mescroll
mescroll este o bibliotecă JavaScript de infinite scroll și un manager de scroll pentru web mobil, conceput pentru a implementa tipare de pull-to-refresh și pull-up-loading. Oferă un sistem pentru gestionarea scroll-ului tactil, gestionarea stărilor de paginare și integrarea acestor comportamente în aplicații Vue.
Biblioteca se distinge prin suport specializat pentru interfețele de chat, permițând încărcarea datelor în ordine inversă și capacitatea de a injecta date într-o direcție inversă pentru a simula istoricul mesajelor. Include, de asemenea, un cache de scroll cu persistență a stării pentru a păstra offset-urile verticale și datele listei atunci când utilizatorii navighează între diferite vizualizări.
Proiectul acoperă o gamă largă de capabilități de interacțiune și performanță, inclusiv suprimarea rubber-banding-ului nativ al browserului, lazy loading-ul imaginilor conștient de viewport și poziționarea programatică a scroll-ului. Oferă, de asemenea, utilitare pentru gestionarea stărilor de paginare, personalizarea UI-ului de încărcare și a stării goale, precum și implementarea navigării back-to-top.
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.
