mescroll/mescroll
Mescroll
mescroll es una librería de scroll infinito en JavaScript y gestor de scroll para web móvil diseñado para implementar patrones de pull-to-refresh y carga al deslizar hacia arriba. Proporciona un sistema para manejar el scroll táctil, gestionar estados de paginación e integrar estos comportamientos dentro de aplicaciones Vue.
La librería se distingue por su soporte especializado para interfaces de chat, permitiendo la carga de datos en orden inverso y la capacidad de inyectar datos en dirección inversa para simular historiales de mensajes. También incluye una caché de scroll con persistencia de estado para preservar los desplazamientos verticales y los datos de la lista cuando los usuarios navegan entre diferentes vistas.
El proyecto cubre un amplio rango de capacidades de interacción y rendimiento, incluyendo la supresión del efecto de rebote nativo del navegador, carga diferida de imágenes consciente del viewport y posicionamiento de scroll programático. Además, proporciona utilidades para gestionar estados de paginación, personalizar la interfaz de carga y estados vacíos, e implementar navegación de regreso al inicio.
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.
