25 repositorios
Detecting scroll events within specific elements instead of the global document for targeted infinite scrolling.
Distinct from Scroll Containers: Distinct from Scroll Containers by focusing on the detection of triggers for data fetching rather than the container's styling.
Explore 25 awesome GitHub repositories matching user interface & experience · Custom Scroll Triggers. Refine with filters or upvote what's useful.
Este proyecto es una biblioteca de JavaScript vainilla y optimizador de rendimiento web diseñado para diferir la carga de imágenes, videos e iframes hasta que entren en el viewport del navegador. Actúa como un wrapper de intersection observer y cargador de medios adaptativo para reducir los tiempos de carga inicial de la página y ahorrar ancho de banda. La biblioteca se distingue por admitir imágenes responsivas mediante srcset y etiquetas picture, así como imágenes de fondo CSS y SVGs animados. Se integra con los atributos de carga nativos del navegador donde están disponibles, mientras proporciona fallbacks personalizados para entornos no compatibles. También puede activar la ejecución de funciones de JavaScript específicas basadas en la visibilidad del elemento. Las capacidades amplias incluyen la gestión de activos frontend con soporte para el direccionamiento de contenedores de desplazamiento personalizados y la observación de contenido dinámico para elementos inyectados de forma asíncrona. La utilidad también gestiona la fiabilidad de la red mediante el manejo de errores de carga de activos y cancela las descargas activas para los elementos que salen del viewport antes de completarse.
Detects visibility triggers within specific scrolling containers instead of only the global browser window.
Inertia is a server-driven frontend framework designed to create monolithic single page applications. It acts as a state synchronization protocol and client-side routing bridge, allowing developers to build interactive experiences using modern JavaScript component libraries while keeping routing and controllers on the server. This approach eliminates the need for a separate REST or GraphQL API layer by passing data from server controllers to frontend components as props via JSON payloads. The framework distinguishes itself by utilizing adapter-based integration to link various backend environ
Detects scroll triggers within a specific element instead of the main document to enable nested infinite scrolling.
Infinite Scroll is a JavaScript library that automatically loads and appends the next page of content when a user scrolls near the bottom of a container, or optionally when they click a button. It provides scroll-based pagination that fetches and inserts subsequent pages of content, with URL-driven content loading that determines next page URLs from selectors, templates, or custom functions. The library integrates with browser history, updating the URL and history state as new pages load while preserving scroll position so each page state is bookmarkable and refreshable. It is compatible with
Automatically fetches and appends the next page of content when the user scrolls near the bottom of a container.
elevator.js is a lightweight JavaScript library that adds a playful, elevator-themed scroll-to-top button to a webpage. When clicked, it smoothly animates the page back to the top while playing a looping elevator music track in the background, masking the transition and adding a whimsical touch to the user experience. The library goes beyond a simple scroll-to-top button by offering configurable scroll duration, the ability to scroll to any specified DOM element with optional vertical padding, and callback hooks that fire user-defined functions at the start and end of the animation. This allo
Provides callback hooks that fire at the start and end of scroll animations for custom integration.
React Virtuoso is a React component library for rendering large datasets efficiently through virtualized lists, grids, tables, and chat interfaces. It automatically measures variable-height items at runtime, computes accurate scroll offsets without requiring fixed sizes, and renders only the items within the visible viewport plus a configurable buffer zone. The library manages scroll position through a state machine that tracks direction, position, and anchor items to handle auto-scroll, sticky headers, and bidirectional loading. The library distinguishes itself with specialized components fo
Triggers loading of additional content when the user scrolls to the end of the list.
Scrollama is a JavaScript library for scroll-driven storytelling that uses the browser's native IntersectionObserver API to trigger step-based callbacks and animations as the user scrolls through a page. It pins graphic elements using CSS sticky positioning while scrolling through associated text steps, enabling side-by-side narrative experiences without JavaScript-driven layout calculations. The library provides a configurable offset threshold system that accepts a single global offset or per-element data-attribute offsets to define the viewport position that triggers step events. It reports
Fires enter and exit callbacks when step elements cross configurable viewport thresholds.
Este proyecto es un componente de carga diferida (lazy loading) para React, diseñado para mejorar el rendimiento del frontend difiriendo el renderizado de elementos hijos hasta que entran en el viewport del navegador. Funciona como un gestor de ciclo de vida de recursos y disparador de visibilidad, evitando montajes innecesarios de componentes fuera de pantalla para reducir los tiempos de carga inicial de la página y el uso de memoria. La biblioteca proporciona configuración para disparadores de visibilidad, permitiendo el uso de offsets personalizados y contenedores de desplazamiento específicos para determinar cuándo se carga un componente. Incluye mecanismos para gestionar ciclos de vida de componentes, permitiendo elegir si un componente permanece cargado después de aparecer o si se desmonta al salir del viewport. Las capacidades adicionales cubren el renderizado diferido mediante el uso de marcadores de posición (placeholders) y la optimización del manejo de eventos para listeners de desplazamiento y cambio de tamaño. El sistema también admite la validación manual de visibilidad para forzar comprobaciones de viewport o exigir que un componente se muestre.
Allows developers to configure load triggers using custom offsets, specific scroll containers, and resize event responses.
Esta biblioteca de scroll suave para JavaScript es una utilidad frontend y controlador de movimiento del viewport diseñada para animar transiciones hacia enlaces de anclaje. Intercepta los clics estándar en enlaces para reemplazar los saltos instantáneos con un movimiento fluido hacia los elementos de destino. La biblioteca proporciona patrones de suavizado de movimiento configurables y controles de velocidad para gestionar la aceleración y desaceleración. Incluye un mecanismo para cancelar animaciones activas inmediatamente y admite el disparo programático de scroll mediante llamadas directas a funciones. La herramienta maneja offsets de posicionamiento para evitar que el contenido de destino quede oculto detrás de cabeceras fijas y sincroniza la barra de direcciones del navegador durante las transiciones. También cuenta con un sistema de callbacks basado en eventos que dispara efectos secundarios cuando las animaciones de scroll comienzan, concluyen o son interrumpidas.
Provides user-defined callbacks that execute at the start and end of smooth scrolling animations.
XRecyclerView es un componente de lista de Android y biblioteca de extensión que añade comportamientos de pull-to-refresh y desplazamiento infinito a un RecyclerView estándar. Sirve como un elemento de interfaz de usuario móvil desplazable diseñado para gestionar listas basadas en datos con soporte para encabezados y pies de página dinámicos. La biblioteca proporciona una interfaz basada en gestos para activar la recarga de contenido mediante un widget de pull-to-refresh e implementa un mecanismo para activar devoluciones de llamada de obtención de datos cuando un usuario llega al final de una lista para permitir el desplazamiento infinito. Además, admite la gestión dinámica de encabezados de lista y la implementación de flujos de trabajo de carga de más contenido para añadir nuevos elementos a medida que el usuario se desplaza.
Automatically fetches and appends the next page of content when the user scrolls near the bottom.
SVPullToRefresh es una biblioteca para añadir comportamientos de "tirar para actualizar" (pull-to-refresh) y desplazamiento infinito a las vistas de desplazamiento (scroll views) de UIKit en la plataforma iOS. Proporciona componentes de interfaz de usuario especializados que permiten la actualización manual de contenido y la paginación dentro de vistas desplazables. La biblioteca implementa mecanismos para activar acciones de carga de datos cuando un usuario tira de una vista de desplazamiento desde la parte superior o llega al final de un área desplazable. Estos disparadores permiten sincronizar la información más reciente o añadir más contenido para crear feeds continuos.
Provides a mechanism to automatically fetch the next page of content when scrolling to the bottom.
in-view is a DOM visibility detector and intersection observer wrapper. It serves as a viewport transition handler that triggers callbacks and events when specific screen elements enter or exit the browser window. The library provides a system for configuring visibility criteria using pixel offsets, percentages, or custom test functions. It includes utilities for observing visibility changes, performing manual visibility evaluations, and checking the current status of an element within the visible area. These capabilities support application patterns such as lazy loading, infinite scrolling,
Provides a configuration system to define visibility thresholds using pixels, percentages, or custom functions.
Stellar.js es una biblioteca de paralaje de JavaScript y un framework de movimiento basado en desplazamiento (scroll) utilizado para coordinar el posicionamiento de elementos del DOM y transformaciones CSS. Funciona como una herramienta de posicionamiento que calcula cambios de coordenadas en tiempo real para imágenes de fondo y elementos en primer plano basados en disparadores de desplazamiento. La biblioteca utiliza un motor de animación de transformación CSS para garantizar que el movimiento esté acelerado por hardware tanto en navegadores móviles como de escritorio. Crea efectos de profundidad aplicando diferentes velocidades de movimiento a los elementos en relación con la tasa de desplazamiento natural. El framework cubre una gama de capacidades de movimiento, incluyendo cálculos de relación de velocidad para el paralaje de fondo y elementos, así como alineación basada en compensación. Permite la definición de elementos ancestros como puntos de referencia para determinar cuándo los elementos deben volver a sus posiciones originales.
Includes specialized adapters to read scroll positions from non-standard sources in touch-scrolling environments.
fluttereasyrefresh es una biblioteca para implementar paginación de tipo pull-to-refresh e infinite scroll dentro de componentes de lista en Flutter. Proporciona los componentes funcionales y la lógica necesarios para activar recargas de datos mediante gestos de arrastre hacia abajo y obtener fragmentos de datos adicionales mediante disparadores de arrastre hacia arriba. El proyecto presenta una arquitectura de indicadores desacoplada que permite estilos visuales personalizables, animaciones temáticas y un posicionamiento flexible de encabezados y pies de página. Incluye un controlador centralizado que permite la gestión programática de los estados de actualización y carga, independientemente de los gestos del usuario. La biblioteca cubre la gestión del scroll mediante física e inercia personalizables, así como la sincronización de datos paginados para automatizar la carga de datos basada en índices de página. También proporciona integración para vistas de scroll anidadas para coordinar las posiciones de los indicadores dentro de una jerarquía de vistas.
Uses custom scroll physics to detect overscroll offsets, triggering refresh headers or load footers based on drag distance.
react-waypoint es un componente de React y herramienta de seguimiento de viewport que ejecuta funciones basadas en la visibilidad de un nodo DOM dentro de un área desplazable. Monitorea cuándo los elementos entran o salen del viewport del navegador o de un contenedor de scroll especificado para disparar callbacks. El proyecto permite la implementación de scroll infinito, carga diferida de activos y animaciones disparadas por scroll. Permite definiciones de contenedores de scroll personalizados y configuraciones de límites de viewport usando offsets para determinar exactamente cuándo se disparan los eventos. La herramienta proporciona seguimiento de posición de elementos y monitoreo de visibilidad tanto para scroll vertical como horizontal. Incluye control de sensibilidad de disparo y limitación de eventos para gestionar la ejecución de callbacks durante el scroll rápido.
Fires user-defined callbacks when elements cross configurable viewport thresholds during vertical or horizontal scrolling.
react-waypoint es un conjunto de componentes y wrappers de React diseñados para ejecutar callbacks cuando elementos específicos del DOM entran o salen del área visible de la pantalla. Funciona como un rastreador de visibilidad del viewport que monitorea cuándo los elementos cruzan límites espaciales predefinidos. El proyecto proporciona un componente de disparo de scroll y un wrapper de eventos que permiten configuraciones de desplazamiento personalizadas para tener en cuenta elementos de UI fijos. Estas herramientas pueden configurarse para usar un nodo DOM específico o la ventana global como el ancestro desplazable para los cálculos de visibilidad. La biblioteca cubre varios patrones de implementación, incluyendo scroll infinito, carga diferida de contenido y animaciones disparadas por scroll. Gestiona estas acciones monitoreando la visibilidad del elemento y disparando funciones basadas en la intersección de la caja delimitadora del elemento y el viewport actual.
Configures top and bottom offsets to adjust the trigger points for element visibility.
ScrollTrigger es una biblioteca de JavaScript y gestor de eventos de scroll del DOM diseñada para ejecutar callbacks y alternar clases CSS cuando los elementos entran o salen del viewport del navegador. Funciona como una interfaz de alto nivel para la API Intersection Observer y un sistema para iniciar transiciones visuales y tareas asíncronas basadas en la posición de un elemento en relación con el viewport. La herramienta permite la definición de puntos de activación precisos utilizando offsets en píxeles o porcentajes para controlar exactamente cuándo se disparan los eventos. Gestiona animaciones visuales basadas en scroll e implementaciones de carga diferida (lazy loading) mediante el seguimiento de umbrales de visibilidad. La biblioteca proporciona capacidades para monitorear la actividad de scroll, como rastrear cuándo comienza, se detiene o cambia de dirección el desplazamiento. Además, admite la activación de eventos de viewport para ejecutar funciones personalizadas o promesas a medida que los elementos cruzan coordenadas específicas.
Runs custom functions or promises when elements enter, leave, or remain visible within the browser viewport.
Sal is a lightweight vanilla JavaScript library designed to trigger CSS animations and execute custom logic as elements enter the browser viewport. It serves as a programmatic wrapper for the Intersection Observer API, providing a viewport trigger system to handle visibility thresholds and scroll-based animations. The library operates as a dependency-free frontend tool that manages animations through a class-based trigger mechanism and the injection of CSS custom properties. It includes a system for tracking dynamic content, allowing the observer to be updated to include new elements injected
Defines the percentage of an element's area or root margin required to trigger animations.
BasicScroll is a standalone scroll-driven animation library that updates CSS custom properties, element styles, and CSS properties dynamically based on absolute or relative viewport scroll positions. It functions as an animation engine designed to build custom parallax scrolling experiences and fluid visual effects on both mobile and desktop viewports. The library supports custom scroll range definitions anchored directly to specific document elements, alongside callback executions that trigger user-defined functions with live progress data and state percentages as the viewport enters or leav
Defines custom scroll ranges anchored directly to specific document elements.
React custom scrollbars is a user interface component built for React applications that replaces native browser scrollbars with custom-styled tracks and thumbs. It maintains consistent visual appearance across different platforms and browsers while generating matching markup on both server and client environments to support server-side rendering without layout shift. The library provides comprehensive styling options by overriding default track, thumb, and view elements with custom components, CSS classes, or inline styles. It handles layout adjustments by resizing container dimensions dynami
The scroll component library triggers callback functions during scrolling actions so applications can respond smoothly to user movement.
This project is a frontend component designed to manage dynamic content loading and scroll-based interactions within web applications. It provides a reusable interface for handling data injection as users navigate through scrollable areas, ensuring that content updates occur automatically based on scroll position or manual user triggers. The component distinguishes itself by supporting both standard downward infinite scrolling and inverse scrolling, which allows for the natural expansion of content history in chat-like interfaces. It offers developers full control over the visual presentation
Monitors scroll position relative to container height to trigger automatic data fetching near the bottom.