awesome-repositories.com
博客
MCP
awesome-repositories.com

通过 AI 驱动的搜索,发现最优秀的开源仓库。

探索精选搜索开源替代品自托管软件博客网站地图
项目MCP 服务器关于排名机制媒体报道
法律隐私政策服务条款
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·

10 个仓库

Awesome GitHub RepositoriesElement-Targeted Scrolling

Programmatic movement of the viewport to align with a specific target element.

Distinct from Programmatic Scrolling: Focuses on jumping to a specific element, whereas Programmatic Scrolling typically refers to coordinates.

Explore 10 awesome GitHub repositories matching user interface & experience · Element-Targeted Scrolling. Refine with filters or upvote what's useful.

Awesome Element-Targeted Scrolling GitHub Repositories

用 AI 发现最棒的仓库。我们将通过 AI 为您搜索最匹配的仓库。
  • flutter-team-archive/pluginsflutter-team-archive 的头像

    flutter-team-archive/plugins

    17,710在 GitHub 上查看↗

    This project is a collection of official plugin packages and a native integration library designed to provide a consistent interface for accessing hardware and software functionality across different mobile and desktop platforms. It serves as a native platform bridge, enabling cross-platform applications to invoke native code and manage operating system dependencies. The project utilizes a federated plugin architecture, splitting plugins into common interfaces and separate platform implementations to allow for independent development and extension. It further supports native integration throu

    Programmatically moves the viewport to align with specific widgets to ensure they are reachable in the UI.

    Dartandroiddartflutter
    在 GitHub 上查看↗17,710
  • cubiq/iscrollcubiq 的头像

    cubiq/iscroll

    12,815在 GitHub 上查看↗

    iscroll is a JavaScript smooth scrolling library and web interaction framework. It provides a 2D web panning controller and a CSS transform zoom engine to manage inertial scrolling, panning, and zooming for web elements across different devices. The project enables the implementation of custom scrollbar interfaces and navigation maps that track the current viewport position. It supports the creation of interactive web carousels with element snapping, web parallax effects, and content scaling via pinch-to-zoom or mouse-wheel inputs. The library covers a broad range of interaction capabilities

    Allows jumping the scroll position to a specific target element using programmatic calls.

    JavaScript
    在 GitHub 上查看↗12,815
  • tholman/elevator.jstholman 的头像

    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

    Ships configurable vertical offset when scrolling to any specified DOM element for precise positioning.

    JavaScript
    在 GitHub 上查看↗6,641
  • russellsamora/scrollamarussellsamora 的头像

    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

    Allows setting unique viewport offsets for individual step elements via data attributes.

    HTML
    在 GitHub 上查看↗5,982
  • cferdinandi/smooth-scrollcferdinandi 的头像

    cferdinandi/smooth-scroll

    5,444在 GitHub 上查看↗

    This JavaScript smooth scrolling library is a frontend utility and viewport motion controller designed to animate transitions to anchor links. It intercepts standard link clicks to replace instant jumps with fluid movement toward target elements. The library provides configurable motion easing patterns and speed controls to manage acceleration and deceleration. It includes a mechanism to cancel active animations immediately and supports programmatic scroll triggering via direct function calls. The tool handles positioning offsets to prevent target content from being hidden behind fixed heade

    Enables programmatic viewport movement to specific DOM elements via JavaScript function calls.

    JavaScriptanchor-linksanimate-scrollingjavascript
    在 GitHub 上查看↗5,444
  • swup/swupswup 的头像

    swup/swup

    5,191在 GitHub 上查看↗

    Swup 是一个页面转换库和 AJAX 页面加载器,旨在为服务端渲染的网站创建无缝的动画页面转换。它作为一个 DOM 内容编排器和浏览器历史记录管理器,拦截导航以动态替换页面内容并模拟单页应用程序体验。 该项目的独特之处在于基于 Hook 的生命周期系统和插件架构,允许注入自定义逻辑和动画效果。它支持先进的视觉方法,包括 DOM 内容变形、用于重叠动画的并行 DOM 渲染,以及与原生浏览器 View Transitions API 的集成。 该库涵盖了广泛的功能,包括客户端导航管理、基于内存的页面缓存以及后台页面预加载以优化性能。它还提供了全面的滚动位置恢复、针对屏幕阅读器的无障碍优化,以及在转换过程中同步文档 Head 元数据和脚本执行的工具。

    Applies custom attributes to target elements to enable CSS styling when they are scrolled into view.

    TypeScriptanimationjavascriptpage-transitions
    在 GitHub 上查看↗5,191
  • samdutton/simplsamdutton 的头像

    samdutton/simpl

    5,191在 GitHub 上查看↗

    Simpl 是一个 HTML、CSS 和 JavaScript 示例库,提供了一系列核心 Web 技术和原生浏览器 API 的最小功能演示。它作为前端开发的参考实现和模式库,提供了如何实现常见 Web 功能的实用示例。 该项目展示了广泛的浏览器功能,包括通过 WebSockets 和 WebRTC 进行的实时 Web 通信、用于自适应布局的响应式 Web 设计技术,以及使用 Service Workers 实现离线工作流。它还提供了使用 IndexedDB 和基于浏览器的键值存储进行客户端存储的演示。 该库涵盖了广泛的 Web 功能,包括与设备传感器和地理位置的硬件集成、用于音频和视频的高级媒体捕获和播放,以及使用 Canvas 进行二维和三维图形渲染。其他领域包括数据操作、异步编程以及使用浏览器 API 监控性能和网络连接。

    Scroll the page until a specific element becomes visible within the current viewport.

    HTMLcsshtmljavascript
    在 GitHub 上查看↗5,191
  • ant-design/ant-motionant-design 的头像

    ant-design/ant-motion

    4,613在 GitHub 上查看↗

    这是一个 React 动画库,提供了一系列组件,用于创建编排运动、复杂过渡和 SVG 形态变换。它作为一个运动设计规范和 UI 组件动画封装系统,用于将 3D 变换、贝塞尔曲线和进入-退出过渡应用于界面元素。 该项目包括一个滚动驱动的动画套件,用于将 UI 运动和视差效果与视口位置同步;以及一个 SVG 运动框架,用于动画化路径、增量绘制线条以及插值坐标以进行形状变换。 其功能涵盖了广泛的视觉运动,包括旋转轮播图等 3D 视觉效果、用于数值插值的数据可视化运动,以及交互式落地页组件。它还管理表格和列表的复杂组件动画,并提供用于对多个元素进行排序和链接动画的工具。

    Programmatically scrolls the viewport smoothly to target elements while managing active visibility states.

    JavaScriptanimationant-motionjavascript
    在 GitHub 上查看↗4,613
  • fisshy/react-scrollfisshy 的头像

    fisshy/react-scroll

    4,411在 GitHub 上查看↗

    react-scroll 是一个用于在 React 应用中管理页面元素之间平滑和即时滚动行为的库。它作为一个 DOM 滚动控制器,提供了一个声明式 API 和一组组件,用于将视口动画化到特定的目标元素。 该库通过允许视口通过即时跳转或动画过渡移动到目标元素来实现自定义滚动。它提供了一个系统,通过使用 Mixin 定义特定的移动触发器和目标,将此滚动逻辑集成到自定义组件中。 该项目涵盖了单页应用布局内的视口导航和焦点过渡,将 React 组件中的用户操作链接到页面内的特定位置。

    Acts as a declarative controller for programmatically moving the viewport to specific target elements.

    JavaScript
    在 GitHub 上查看↗4,411
  • bigskysoftware/_hyperscriptbigskysoftware 的头像

    bigskysoftware/_hyperscript

    3,706在 GitHub 上查看↗

    Hyperscript is a DOM manipulation library and HTML scripting language that functions as a logic engine and reactive UI framework. It allows for the definition of interactive behavior and client-side logic directly within HTML attributes. The system distinguishes itself through declarative web scripting and in-HTML interactive behavior, which removes the requirement for separate JavaScript files to manage element states. It utilizes a specialized syntax for data processing, employing pipe operators to filter, sort, and convert data collections within the browser. The framework provides capabi

    Provides programmatic movement of the viewport to align with specific target elements.

    JavaScripthtmxhyperscriptscripting-language
    在 GitHub 上查看↗3,706
  1. Home
  2. User Interface & Experience
  3. Scroll Areas
  4. Programmatic Scrolling
  5. Element-Targeted Scrolling

探索子标签

  • Scroll Target StylingAdding markers to elements to allow CSS styling when they become the active scroll target. **Distinct from Element-Targeted Scrolling:** Focuses on applying CSS-stylable attributes to the target, whereas the parent focuses on the movement to the target
  • Target Offset Configurators1 个子标签Optional vertical padding applied when scrolling to a target element for precise viewport positioning. **Distinct from Element-Targeted Scrolling:** Distinct from Element-Targeted Scrolling: adds configurable offset/padding to the target position rather than just aligning to the element.