34 مستودعات
Components that provide custom-styled scrollable areas for managing overflowing content.
Distinguishing note: Focuses on scrollable container management rather than general layout structure.
Explore 34 awesome GitHub repositories matching user interface & experience · Scroll Containers. Refine with filters or upvote what's useful.
fullPage.js is a JavaScript full-screen scrolling library and layout engine used to create websites composed of vertical sections and horizontal slides that snap to the viewport. It provides a system for organizing web content into full-screen pages with automatic snapping behavior. The library distinguishes itself through a WebGL transition framework and visual storytelling tools, enabling cinematic effects such as 3D rotations, parallax backgrounds, fading, and water distortion during navigation. It also features a responsive adaptation system that can switch from automatic snapping to stan
Automatically switches from snap-scrolling to standard browser scrolling when viewport dimensions fall below defined thresholds.
Mantine is a comprehensive component library for building accessible and responsive web applications. It provides a foundational set of UI elements and layout primitives, anchored by a base component that supports consistent styling, spacing, and layout properties across the entire interface. The library is built on a design-driven theme engine that uses a provider-based system to propagate global design tokens and color schemes throughout an application. The library distinguishes itself through a robust architecture that emphasizes component composition and reusable interaction logic. It uti
Mantine provides scrollable containers with custom-styled scrollbars that support various visibility modes and programmatic control for managing overflowing content.
Pico is a lightweight, classless CSS framework designed to provide consistent, accessible, and responsive visual defaults for web interfaces. By prioritizing semantic HTML tags, it allows developers to build clean, structured pages without the need for complex class names or heavy dependencies. The framework functions as a comprehensive design system that automatically applies styling to standard elements, ensuring that typography, spacing, and layout remain cohesive across different screen sizes. The framework distinguishes itself through a modular, variable-driven architecture that emphasiz
Applies automatic scrollbars to containers when content exceeds dimensions.
mui is a mobile UI component framework and native-like web UI kit designed for building high-performance mobile web interfaces. It functions as a mobile web performance framework and gesture-based interface library to eliminate browser lag and mimic the behaviors and animations of native mobile applications. The framework focuses on implementing common mobile UX patterns, including pull-to-refresh functionality, swipe-to-action menus, and sliding side navigation. It provides specialized tools for gesture-driven interface development to ensure an immediate visual response to touch interactions
Implements managers for revealing operation buttons via left and right swipe gestures on list items.
Lenis is a lightweight JavaScript library designed to provide fluid, momentum-based scrolling experiences for web interfaces. It functions as a frontend utility that decouples visual scroll position from the browser's native state, allowing for custom easing and duration while preserving standard browser accessibility, search functionality, and layout measurement tools. The library distinguishes itself by normalizing input from mouse wheels and touch gestures into a unified stream, ensuring consistent physics across different devices. It operates by intercepting native scroll events and apply
Allows configuration of vertical and horizontal movement constraints for specific page elements or the entire viewport.
react-native-swiper is a cross-platform mobile carousel component that provides a swipeable interface for cycling through content panels. It supports both horizontal and vertical transitions and includes a visual pagination system using customizable indicators like dots or numbers to track the user's position. The component features a lazy-loading mechanism that defers the rendering of off-screen content to reduce memory usage and improve initial load times. It supports infinite looping, automated slide transitions via a timer, and programmatic navigation control to move the slider to specifi
Allows for programmatic control of slide transitions via external buttons or internal logic.
cube-ui is a mobile-first Vue.js component library that provides a comprehensive set of pre-built UI elements for building touch-based mobile web applications. The library is built on Vue's single-file component architecture and supports on-demand ES module imports, allowing developers to selectively load only the components they need to optimize bundle size. It also offers plugin-based global registration for convenient setup and includes a CLI scaffolding tool to generate project skeletons with pre-configured build settings. The library distinguishes itself with a gesture-driven interaction
Ships swipe actions on list items to reveal hidden delete or archive buttons.
Base UI is a headless component library and unstyled framework providing accessible interface primitives. It decouples behavioral logic and state management from the visual layer, allowing developers to implement complex UI patterns while maintaining total control over the final styling. The library implements WAI-ARIA design patterns to ensure all primitives support standard keyboard navigation and screen reader accessibility. It provides a suite of low-level building blocks that handle the internal mechanics of interface elements without bundling any CSS. The framework covers a broad range
Defines invisible viewport regions that trigger the opening of a drawer via swipe gestures.
هذا المشروع عبارة عن مكتبة JavaScript بسيطة ومحسن لأداء الويب مصمم لتأجيل تحميل الصور، ومقاطع الفيديو، وiframes حتى تدخل في إطار عرض المتصفح (viewport). يعمل كغلاف لمراقب التقاطع (intersection observer) ومحمل وسائط متكيف لتقليل أوقات تحميل الصفحة الأولية وتوفير النطاق الترددي. تتميز المكتبة بدعم الصور المتجاوبة عبر srcset ووسوم picture، بالإضافة إلى صور خلفية CSS وSVG المتحركة. تتكامل مع سمات التحميل الأصلية للمتصفح حيثما توفرت مع توفير بدائل مخصصة للبيئات غير المدعومة. يمكنها أيضاً تشغيل تنفيذ دوال JavaScript معينة بناءً على رؤية العنصر. تغطي القدرات الواسعة إدارة أصول الواجهة الأمامية مع دعم استهداف حاوية التمرير المخصصة ومراقبة المحتوى الديناميكي للعناصر المحقونة بشكل غير متزامن. تدير الأداة أيضاً موثوقية الشبكة من خلال معالجة أخطاء تحميل الأصول وإلغاء التنزيلات النشطة للعناصر التي تخرج من إطار العرض قبل الاكتمال.
Supports independent scrolling panels by binding visibility detection to specific overflow elements instead of the global 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.
Rellax is a dependency-free vanilla JavaScript library and frontend utility used to create parallax web design effects. It functions as a scroll-based animation tool that moves page elements at different speeds to produce a sense of depth and layered motion. The library supports both vertical and horizontal parallax tracking for panoramic layouts and allows for motion speed control. It includes breakpoint-aware speed mapping to adjust movement based on screen width and provides viewport centering to position elements relative to the center of the screen. Beyond basic motion, the tool manages
Supports monitoring scroll events within specific overflow elements instead of the global window.
SWTableViewCell is a UIKit component and library for adding interactive swipe-to-reveal action buttons to table view cells in iOS applications. It functions as a swipe action manager and a specialized interface element designed to handle touch gestures and sliding animations for list items. The library features a layout mechanism that automatically scales the size of action buttons to fit available screen space based on the number of buttons added. It uses a system to detect touch events that trigger specific actions or slide cells back to their original positions. The system manages the spa
Manages the configuration and scaling of multiple action buttons that appear upon swiping a list row.
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.
Swipeable UITableViewCell/UICollectionViewCell based on the stock Mail.app, implemented in Swift.
Reveals action buttons using Border, Drag, or Reveal animation styles during cell swiping.
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 callbacks when a scroll target reaches a configurable vertical offset from the viewport.
هذا المشروع هو مكون تحميل كسول (lazy loading) لـ React مصمم لتحسين أداء الواجهة الأمامية عن طريق تأجيل عرض العناصر الفرعية حتى تدخل في إطار عرض المتصفح. يعمل كمدير لدورة حياة الموارد ومحفز للرؤية، مما يمنع التحميل غير الضروري للمكونات خارج الشاشة لتقليل أوقات تحميل الصفحة الأولية واستخدام الذاكرة. توفر المكتبة تكويناً لمحفزات الرؤية، مما يسمح باستخدام إزاحات مخصصة وحاويات تمرير محددة لتحديد متى يتم تحميل المكون. تتضمن آليات لإدارة دورات حياة المكونات، مما يتيح اختيار ما إذا كان المكون يظل محملاً بعد ظهوره أو يتم إلغاء تحميله عند مغادرة إطار العرض. تغطي القدرات الإضافية العرض المؤجل من خلال استخدام العناصر النائبة وتحسين معالجة الأحداث لمستمعي التمرير وتغيير الحجم. يدعم النظام أيضاً التحقق اليدوي من الرؤية لفرض فحوصات إطار العرض أو إلزام المكون بالعرض.
Allows developers to configure load triggers using custom offsets, specific scroll containers, and resize event responses.
هذا المشروع عبارة عن مكتبة واجهة مستخدم لبناء تقويمات قابلة للتخصيص عبر مشاريع Android وKotlin Multiplatform. يوفر بنية تعتمد على recycler لإنشاء تقويمات شهرية وأسبوعية وسنوية، إلى جانب مجموعة من الدوال القابلة للتركيب (composable functions) لعرض منتقي التواريخ التفاعلي وعروض الأشهر في Jetpack Compose. تتضمن المكتبة مكون خريطة حرارية للمساهمات لعرض كثافة البيانات بمرور الوقت باستخدام خلايا يومية مرمزة بالألوان. كما توفر مجموعة أدوات لتنفيذ واجهات اختيار نطاق التواريخ التي تدعم اختيار تاريخ واحد، أو تواريخ متعددة، أو نطاق تواريخ مع قيود حدودية. يغطي إطار العمل مجموعة واسعة من الإمكانيات، بما في ذلك عرض التواريخ المرن مع عناوين أيام الأسبوع المترجمة وعناصر تحكم متنوعة في التمرير. كما يدعم تخصيص نمط الخلايا وحاويات التخطيط، بالإضافة إلى أدوات التنقل للقفز إلى تاريخ مستهدف وتتبع النطاق المرئي.
Identifies the first and last visible days, weeks, months, or years currently displayed on the screen via visibility tracking.
مكتبة التمرير السلس (Smooth Scrolling) لـ JavaScript هذه هي أداة واجهة أمامية ووحدة تحكم في حركة إطار العرض مصممة لتحريك الانتقالات إلى روابط الارتساء (Anchor links). تقوم باعتراض نقرات الروابط القياسية لاستبدال القفزات الفورية بحركة انسيابية نحو العناصر المستهدفة. توفر المكتبة أنماط تخفيف حركة قابلة للتكوين وعناصر تحكم في السرعة لإدارة التسارع والتباطؤ. تتضمن آلية لإلغاء الرسوم المتحركة النشطة فوراً وتدعم تشغيل التمرير البرمجي عبر استدعاءات الوظائف المباشرة. تتعامل الأداة مع إزاحات التموضع لمنع إخفاء المحتوى المستهدف خلف الرؤوس الثابتة وتزامن شريط عنوان المتصفح أثناء الانتقالات. كما تتميز بنظام استدعاء (Callback) يعتمد على الأحداث يقوم بتشغيل تأثيرات جانبية عند بدء أو انتهاء أو مقاطعة رسوم التمرير المتحركة.
Provides user-defined callbacks that execute at the start and end of smooth scrolling animations.