awesome-repositories.com
المدونة
awesome-repositories.com

اكتشف أفضل مستودعات المصادر المفتوحة باستخدام بحث مدعوم بالذكاء الاصطناعي.

استكشفعمليات بحث منسقةبدائل مفتوحة المصدربرمجيات ذاتية الاستضافةالمدونةخريطة الموقع
المشروعحولكيفية ترتيب النتائجالصحافةخادم MCP
قانونيالخصوصيةالشروط
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·

34 مستودعات

Awesome GitHub RepositoriesScroll Containers

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.

Awesome Scroll Containers GitHub Repositories

اعثر على أفضل المستودعات باستخدام الذكاء الاصطناعي.سنبحث عن أفضل المستودعات المطابقة باستخدام الذكاء الاصطناعي.
  • alvarotrigo/fullpage.jsالصورة الرمزية لـ alvarotrigo

    alvarotrigo/fullPage.js

    35,437عرض على GitHub↗

    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.

    JavaScriptfullpagefullscreenjavascript
    عرض على GitHub↗35,437
  • mantinedev/mantineالصورة الرمزية لـ mantinedev

    mantinedev/mantine

    31,263عرض على GitHub↗

    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.

    TypeScriptdark-modedark-themehooks
    عرض على GitHub↗31,263
  • picocss/picoالصورة الرمزية لـ picocss

    picocss/pico

    16,342عرض على GitHub↗

    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.

    CSScsscss-frameworkdark-mode
    عرض على GitHub↗16,342
  • dcloudio/muiالصورة الرمزية لـ dcloudio

    dcloudio/mui

    13,474عرض على GitHub↗

    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.

    JavaScriptandroidcssdcloud
    عرض على GitHub↗13,474
  • darkroomengineering/lenisالصورة الرمزية لـ darkroomengineering

    darkroomengineering/lenis

    13,217عرض على GitHub↗

    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.

    TypeScriptperformancereactscroll
    عرض على GitHub↗13,217
  • leecade/react-native-swiperالصورة الرمزية لـ leecade

    leecade/react-native-swiper

    10,490عرض على GitHub↗

    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.

    JavaScript
    عرض على GitHub↗10,490
  • didi/cube-uiالصورة الرمزية لـ didi

    didi/cube-ui

    9,116عرض على GitHub↗

    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.

    JavaScriptcube-uijavascriptui-library
    عرض على GitHub↗9,116
  • mui/base-uiالصورة الرمزية لـ mui

    mui/base-ui

    8,711عرض على GitHub↗

    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.

    TypeScriptaccessibilitydesign-systemreact
    عرض على GitHub↗8,711
  • verlok/lazyloadالصورة الرمزية لـ verlok

    verlok/lazyload

    7,852عرض على GitHub↗

    هذا المشروع عبارة عن مكتبة 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.

    JavaScript
    عرض على GitHub↗7,852
  • inertiajs/inertiaالصورة الرمزية لـ inertiajs

    inertiajs/inertia

    7,708عرض على GitHub↗

    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.

    TypeScript
    عرض على GitHub↗7,708
  • metafizzy/infinite-scrollالصورة الرمزية لـ metafizzy

    metafizzy/infinite-scroll

    7,489عرض على GitHub↗

    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.

    HTMLajaxjavascript-pluginjquery-plugin
    عرض على GitHub↗7,489
  • dixonandmoe/rellaxالصورة الرمزية لـ dixonandmoe

    dixonandmoe/rellax

    7,143عرض على GitHub↗

    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.

    HTML
    عرض على GitHub↗7,143
  • cewendel/swtableviewcellالصورة الرمزية لـ CEWendel

    CEWendel/SWTableViewCell

    7,107عرض على GitHub↗

    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.

    Objective-C
    عرض على GitHub↗7,107
  • tholman/elevator.jsالصورة الرمزية لـ tholman

    tholman/elevator.js

    6,641عرض على GitHub↗

    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.

    JavaScript
    عرض على GitHub↗6,641
  • petyosi/react-virtuosoالصورة الرمزية لـ petyosi

    petyosi/react-virtuoso

    6,348عرض على GitHub↗

    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.

    TypeScriptchatcomponent-libraryfeed
    عرض على GitHub↗6,348
  • swipecellkit/swipecellkitالصورة الرمزية لـ SwipeCellKit

    SwipeCellKit/SwipeCellKit

    6,288عرض على GitHub↗

    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.

    Swift
    عرض على GitHub↗6,288
  • russellsamora/scrollamaالصورة الرمزية لـ russellsamora

    russellsamora/scrollama

    5,982عرض على GitHub↗

    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.

    HTML
    عرض على GitHub↗5,982
  • jasonslyvia/react-lazyloadالصورة الرمزية لـ jasonslyvia

    jasonslyvia/react-lazyload

    5,904عرض على GitHub↗

    هذا المشروع هو مكون تحميل كسول (lazy loading) لـ React مصمم لتحسين أداء الواجهة الأمامية عن طريق تأجيل عرض العناصر الفرعية حتى تدخل في إطار عرض المتصفح. يعمل كمدير لدورة حياة الموارد ومحفز للرؤية، مما يمنع التحميل غير الضروري للمكونات خارج الشاشة لتقليل أوقات تحميل الصفحة الأولية واستخدام الذاكرة. توفر المكتبة تكويناً لمحفزات الرؤية، مما يسمح باستخدام إزاحات مخصصة وحاويات تمرير محددة لتحديد متى يتم تحميل المكون. تتضمن آليات لإدارة دورات حياة المكونات، مما يتيح اختيار ما إذا كان المكون يظل محملاً بعد ظهوره أو يتم إلغاء تحميله عند مغادرة إطار العرض. تغطي القدرات الإضافية العرض المؤجل من خلال استخدام العناصر النائبة وتحسين معالجة الأحداث لمستمعي التمرير وتغيير الحجم. يدعم النظام أيضاً التحقق اليدوي من الرؤية لفرض فحوصات إطار العرض أو إلزام المكون بالعرض.

    Allows developers to configure load triggers using custom offsets, specific scroll containers, and resize event responses.

    JavaScript
    عرض على GitHub↗5,904
  • kizitonwose/calendarالصورة الرمزية لـ kizitonwose

    kizitonwose/Calendar

    5,551عرض على GitHub↗

    هذا المشروع عبارة عن مكتبة واجهة مستخدم لبناء تقويمات قابلة للتخصيص عبر مشاريع 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.

    Kotlinandroidcalendarcalendar-library
    عرض على GitHub↗5,551
  • cferdinandi/smooth-scrollالصورة الرمزية لـ cferdinandi

    cferdinandi/smooth-scroll

    5,444عرض على GitHub↗

    مكتبة التمرير السلس (Smooth Scrolling) لـ JavaScript هذه هي أداة واجهة أمامية ووحدة تحكم في حركة إطار العرض مصممة لتحريك الانتقالات إلى روابط الارتساء (Anchor links). تقوم باعتراض نقرات الروابط القياسية لاستبدال القفزات الفورية بحركة انسيابية نحو العناصر المستهدفة. توفر المكتبة أنماط تخفيف حركة قابلة للتكوين وعناصر تحكم في السرعة لإدارة التسارع والتباطؤ. تتضمن آلية لإلغاء الرسوم المتحركة النشطة فوراً وتدعم تشغيل التمرير البرمجي عبر استدعاءات الوظائف المباشرة. تتعامل الأداة مع إزاحات التموضع لمنع إخفاء المحتوى المستهدف خلف الرؤوس الثابتة وتزامن شريط عنوان المتصفح أثناء الانتقالات. كما تتميز بنظام استدعاء (Callback) يعتمد على الأحداث يقوم بتشغيل تأثيرات جانبية عند بدء أو انتهاء أو مقاطعة رسوم التمرير المتحركة.

    Provides user-defined callbacks that execute at the start and end of smooth scrolling animations.

    JavaScriptanchor-linksanimate-scrollingjavascript
    عرض على GitHub↗5,444
السابق12التالي
  1. Home
  2. User Interface & Experience
  3. Scroll Containers

استكشف الوسوم الفرعية

  • Custom Scroll Triggers6 وسوم فرعية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.
  • Manual Swipe Controllers1 وسم فرعيLogic for executing precise swipe gestures on scrollable containers that do not respond to standard input commands. **Distinct from Scroll Containers:** Distinct from scroll containers: focuses on the interaction logic for manual swipe loops rather than container styling.
  • ResponsiveApplies automatic scrollbars to containers when content exceeds dimensions on smaller screens. **Distinct from Scroll Containers:** Distinct from Scroll Containers: focuses on the responsive adaptation of scroll behavior.
  • Swipe Action Managers9 وسوم فرعيةSystems for configuring, scaling, and triggering a set of action buttons revealed by a swipe gesture. **Distinct from Manual Swipe Controllers:** Manages a set of action buttons rather than just the interaction logic of a scroll container.
  • Visibility TrackingBinding visibility detection to specific scrollable containers to track elements within independent panels. **Distinct from Scroll Containers:** Focuses on tracking element visibility within a container rather than managing the container's styling or isolation.