# ustbhuangyi/better-scroll **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/ustbhuangyi-better-scroll).** 16,489 stars · 2,586 forks · TypeScript · MIT ## Links - GitHub: https://github.com/ustbhuangyi/better-scroll - Homepage: https://better-scroll.github.io/docs/en-US/ - awesome-repositories: https://awesome-repositories.com/repository/ustbhuangyi-better-scroll.md ## Topics `better-performance` `ios` `iscroll` `mobile-web` `more-features` `vue` ## Description Better-scroll is a JavaScript scroll library and touch interaction engine designed to create high-performance scrollable areas in web browsers. It functions as a modular UI component framework that provides the foundation for building complex scrollable elements. The library is distinguished by a plugin-based architecture that allows the injection of custom methods and event hooks. This system enables the creation of specialized interface components such as carousel sliders, scrollable picker inputs, and draggable element systems. The project covers a wide range of mobile web interaction patterns, including pull-to-refresh workflows, infinite scrolling, and pinch-and-scale zooming. It includes a smooth scrolling engine with inertia and rebound effects, alongside a DOM content observer that monitors size changes to update scrollable dimensions. Technical capabilities also encompass nested scroll coordination and mouse wheel mapping for consistent cross-platform behavior. ## Tags ### User Interface & Experience - [Smooth Scrolling](https://awesome-repositories.com/f/user-interface-experience/scroll-animations/smooth-scrolling.md) — Provides a high-performance smooth scrolling engine with configurable inertia and rebound effects. ([source](https://better-scroll.github.io/docs/en-US/)) - [Physical Motion Simulators](https://awesome-repositories.com/f/user-interface-experience/coordinate-based-position-calculators/transform-calculators/geometric-motion-engines/physical-motion-simulators.md) — Provides a fluid scrolling engine with configurable inertia and rebound effects to mimic physical movement. - [Event-Driven Interaction Handlers](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/general-interaction-frameworks/interaction-models/event-driven-interaction-handlers.md) — Translates raw touch and mouse wheel events into internal coordinate changes to drive scroll state. - [Modular UI Components](https://awesome-repositories.com/f/user-interface-experience/modular-ui-components.md) — Provides a plugin-based architecture for composing complex scrollable UI modules like carousels and pickers. - [Pull-to-Refresh Components](https://awesome-repositories.com/f/user-interface-experience/pull-to-refresh-components.md) — Provides a dedicated mechanism for triggering content refresh via downward swipe gestures. ([source](https://better-scroll.github.io/docs/en-US/)) - [Nested Scroll Coordination](https://awesome-repositories.com/f/user-interface-experience/scroll-areas/scroll-orchestrators/nested-scroll-coordination.md) — Coordinates scrolling behavior between parent and child containers to prevent conflicting scroll events. ([source](https://better-scroll.github.io/examples/)) - [Custom UI Component Frameworks](https://awesome-repositories.com/f/user-interface-experience/custom-ui-component-frameworks.md) — Provides a framework for building specialized mobile elements like pickers and carousels through an extensible scrolling engine. - [DOM Observers](https://awesome-repositories.com/f/user-interface-experience/dom-observers.md) — Includes a utility that monitors DOM changes to dynamically update scrollable area height and prevent layout breaks. - [DOM Mutation Observers](https://awesome-repositories.com/f/user-interface-experience/dynamic-layout-engines/variable-size-content-layout/dom-mutation-observers.md) — Monitors element size changes and image loads to automatically update the total scrollable area height. ([source](https://better-scroll.github.io/examples/)) - [Infinite Scrolling](https://awesome-repositories.com/f/user-interface-experience/infinite-scrolling.md) — Implements a UX pattern that automatically loads additional content as users reach the bottom of a list. - [Touch Interaction Optimizations](https://awesome-repositories.com/f/user-interface-experience/mobile-interfaces/mobile-input-optimization/touch-interaction-optimizations.md) — Handles complex mobile navigation patterns including nested scrolling and pinch-to-zoom functionality. - [Scroll Position Indicators](https://awesome-repositories.com/f/user-interface-experience/scroll-position-indicators.md) — Provides visual scrollbars and indicators to communicate the user's position relative to the total content length. ([source](https://better-scroll.github.io/examples/)) - [Gesture-Based Zooming](https://awesome-repositories.com/f/user-interface-experience/viewport-navigation-controls/zoom-animations/gesture-based-zooming.md) — Implements zoom functionality triggered by pinch-to-zoom gestures on touch interfaces. ([source](https://better-scroll.github.io/examples/)) ### Web Development - [Mobile Scroll Libraries](https://awesome-repositories.com/f/web-development/mobile-scroll-libraries.md) — Serves as a high-performance JavaScript library for creating smooth touch scrolling experiences on mobile websites. - [Smooth Scroll Libraries](https://awesome-repositories.com/f/web-development/smooth-scroll-libraries.md) — Implements a high-performance scrolling library with inertia and rebound effects for web browsers. - [DOM Mutation Observation](https://awesome-repositories.com/f/web-development/dom-mutation-observation.md) — Monitors the DOM for structural changes and image loads to automatically update scrollable dimensions. ### Part of an Awesome List - [Touch and Gestures](https://awesome-repositories.com/f/awesome-lists/devtools/touch-and-gestures.md) — Functions as a touch interaction engine for handling gestures like swiping, pulling to refresh, and infinite loading. - [Carousels and Sliders](https://awesome-repositories.com/f/awesome-lists/devtools/carousels-and-sliders.md) — Implements a layout system for organizing content into sliding pages accessible via swipes. ([source](https://better-scroll.github.io/examples/)) ### Development Tools & Productivity - [Plugin & Integration Systems](https://awesome-repositories.com/f/development-tools-productivity/plugin-integration-systems.md) — Provides a system for integrating custom plugins to add new methods and event hooks to the core instance. ([source](https://better-scroll.github.io/docs/en-US/plugins/)) ### Software Engineering & Architecture - [Hook-Based Plugin Systems](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures/hook-based-plugin-systems.md) — Features a plugin architecture that allows extending the core instance via lifecycle event hooks and interface injection.