[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3827":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":35,"discoverSource":36},3827,"better-scroll","ustbhuangyi\u002Fbetter-scroll","ustbhuangyi",":scroll: inspired by iscroll, and it supports more features and has a better scroll perfermance","https:\u002F\u002Fbetter-scroll.github.io\u002Fdocs\u002Fen-US\u002F",null,"TypeScript",16486,2586,254,66,0,2,7,1,45,"MIT License",false,"dev",true,[26,27,28,29,30,31],"better-performance","ios","iscroll","mobile-web","more-features","vue","2026-06-12 02:00:54","# better-scroll\n\n\u003Cimg src=\"https:\u002F\u002Fdpubstatic.udache.com\u002Fstatic\u002Fdpubimg\u002Ft_L6vAgQ-E\u002Flogo.svg\">\n\n[![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fbetter-scroll.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fbetter-scroll) [![downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fbetter-scroll.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fbetter-scroll) [![Build Status](https:\u002F\u002Ftravis-ci.org\u002Fustbhuangyi\u002Fbetter-scroll.svg?branch=master)](https:\u002F\u002Ftravis-ci.org\u002Fustbhuangyi\u002Fbetter-scroll)  [![Package Quality](http:\u002F\u002Fnpm.packagequality.com\u002Fshield\u002Fbetter-scroll.svg)](http:\u002F\u002Fpackagequality.com\u002F#?package=better-scroll) [![codecov.io](http:\u002F\u002Fcodecov.io\u002Fgithub\u002Fustbhuangyi\u002Fbetter-scroll\u002Fcoverage.svg?branch=master)](http:\u002F\u002Fcodecov.io\u002Fgithub\u002Fustbhuangyi\u002Fbetter-scroll) [![Gitpod Ready-to-Code](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FGitpod-Ready--to--Code-blue?logo=gitpod)](https:\u002F\u002Fgitpod.io\u002Ffrom-referrer\u002F)\n\n[中文文档](https:\u002F\u002Fgithub.com\u002Fustbhuangyi\u002Fbetter-scroll\u002Fblob\u002Fmaster\u002FREADME_zh-CN.md)\n\n[1.x Docs](https:\u002F\u002Fbetter-scroll.github.io\u002Fdocs-v1\u002F)\n\n[2.x Docs](https:\u002F\u002Fbetter-scroll.github.io\u002Fdocs\u002Fen-US\u002F)\n\n[2.x Demo](https:\u002F\u002Fbetter-scroll.github.io\u002Fexamples\u002F)\n\n> **Note**: `1.x` is not maintained. please migrate your version as soon as possible\n\n# Install\n\n```bash\nnpm install better-scroll -S # install 2.x，with full-featured plugin.\n\nnpm install @better-scroll\u002Fcore # only CoreScroll\n```\n\n```js\nimport BetterScroll from 'better-scroll'\n\nlet bs = new BetterScroll('.wrapper', {\n  movable: true,\n  zoom: true\n})\n\nimport BScroll from '@better-scroll\u002Fcore'\n\nlet bs = new BScroll('.wrapper', {})\n```\n\n# CDN\n\nBetterScroll with full-featured plugin.\n\n```html\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fbetter-scroll@latest\u002Fdist\u002Fbetter-scroll.js\">\u003C\u002Fscript>\n\n\u003C!-- minify -->\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fbetter-scroll@latest\u002Fdist\u002Fbetter-scroll.min.js\">\u003C\u002Fscript>\n```\n\n```js\nlet wrapper = document.getElementById(\"wrapper\")\nlet bs = BetterScroll.createBScroll(wrapper, {})\n```\n\n\nOnly CoreScroll\n\n```html\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002F@better-scroll\u002Fcore@latest\u002Fdist\u002Fcore.js\">\u003C\u002Fscript>\n\n\u003C!-- minify -->\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002F@better-scroll\u002Fcore@latest\u002Fdist\u002Fcore.min.js\">\u003C\u002Fscript>\n```\n\n```js\nlet wrapper = document.getElementById(\"wrapper\")\nlet bs = new BScroll(wrapper, {})\n```\n\n## What is BetterScroll ?\n\nBetterScroll is a plugin which is aimed at solving scrolling circumstances on the mobile side (PC supported already). The core is inspired by the implementation of [iscroll](https:\u002F\u002Fgithub.com\u002Fcubiq\u002Fiscroll), so the APIs of BetterScroll are compatible with iscroll on the whole. What's more, BetterScroll also extends some features and optimizes for performance based on iscroll.\n\nBetterScroll is implemented with plain JavaScript, which means it's dependency free.\n\n## Getting started\n\nThe most common application scenario of BetterScroll is list scrolling. Let's see its HTML:\n\n```html\n\u003Cdiv class=\"wrapper\">\n  \u003Cul class=\"content\">\n    \u003Cli>...\u003C\u002Fli>\n    \u003Cli>...\u003C\u002Fli>\n    ...\n  \u003C\u002Ful>\n  \u003C!-- you can put some other DOMs here, it won't affect the scrolling\n\u003C\u002Fdiv>\n```\n\nIn the code above, BetterScroll is applied to the outer `wrapper` container, and the scrolling part is `content` element. Pay attention that BetterScroll handles the scroll of the first child element (content) of the container (`wrapper`) by default, which means other elements will be ignored. However, for BetterScroll v2.0.4, content can be specified through the `specifiedIndexAsContent` option. Please refer to the docs for details.\n\nThe simplest initialization code is as follow:\n\n```javascript\nimport BScroll from '@better-scroll\u002Fcore'\nlet wrapper = document.querySelector('.wrapper')\nlet scroll = new BScroll(wrapper)\n```\n\nBetterScroll provides a class whose first parameter is a plain DOM object when instantiated. Certainly, BetterScroll inside would try to use querySelector to get the DOM object.\n\n## The principle of scrolling\n\nMany developers have used BetterScroll, but the most common problem they have met is:\n\n> I have initiated BetterScroll, but the content can't scroll.\n\nThe phenomenon is 'the content can't scroll' and we need to figure out the root cause. Before that, let's take a look at the browser's scrolling principle: everyone can see the browser's scroll bar. When the height of the page content exceeds the viewport height, the vertical scroll bar will appear; When the width of page content exceeds the viewport width, the horizontal bar will appear. That is to say, when the viewport can't display all the content, the browser would guide the user to scroll the screen with scroll bar to see the rest of content.\n\nThe principle of BetterScroll is samed as the browser. We can feel about this more obviously using a picture:\n\n![布局](https:\u002F\u002Fraw.githubusercontent.com\u002Fustbhuangyi\u002Fbetter-scroll\u002Fmaster\u002Fpackages\u002Fvuepress-docs\u002Fdocs\u002F.vuepress\u002Fpublic\u002Fassets\u002Fimages\u002Fschematic.png)\n\nThe green part is the wrapper, also known as the parent container, which has **fixed height**. The yellow part is the content, which is **the first child element** of the parent container and whose height would grow with the size of its content. Then, when the height of the content doesn't exceed the height of the parent container, the content would not scroll. Once exceeded, the content can be scrolled. That is the principle of BetterScroll.\n\n## Plugins\n\nEnhance the ability of BetterScroll core scroll through plugins, such as\n\n```js\nimport BScroll from '@better-scroll\u002Fcore'\nimport PullUp from '@better-scroll\u002Fpull-up'\n\nlet bs = new BScroll('.wrapper', {\n  pullUpLoad: true\n})\n```\n\nPlease see for details, [Plugins](https:\u002F\u002Fbetter-scroll.github.io\u002Fdocs\u002Fen-US\u002Fplugins\u002F).\n\n## Using BetterScroll with MVVM frameworks\n\nI wrote an article [When BetterScroll meets Vue](https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F27407024) (in Chinese). I also hope that developers can contribute to share the experience of using BetterScroll with other frameworks.\n\nA fantastic mobile ui lib implement by Vue: [cube-ui](https:\u002F\u002Fgithub.com\u002Fdidi\u002Fcube-ui\u002F)\n\n## Contributing\n\n### Online one-click setup\n\nYou can use Gitpod(An Online Open Source VS Code like IDE which is free for Open Source) for contributing. With a single click it will launch a workspace and automatically:\n\n- clone the `better-scroll` repo.\n- install all of the dependencies.\n- run `yarn vue:dev`,\n- run `yarn docs:build` and `yarn docs:dev`.\n\n[![Open in Gitpod](https:\u002F\u002Fgitpod.io\u002Fbutton\u002Fopen-in-gitpod.svg)](https:\u002F\u002Fgitpod.io\u002Ffrom-referrer\u002F)\n\n## Using BetterScroll in the real project\n\nIf you want to learn how to use BetterScroll in the real project，you can learn my two practical courses(in Chinese)。\n\n[High imitating starvation takeout practical course base on Vue.js](https:\u002F\u002Fcoding.imooc.com\u002Fclass\u002F74.html)\n\n[Project demo address](http:\u002F\u002Fustbhuangyi.com\u002Fsell\u002F)\n\n![QR Code](https:\u002F\u002Fqr.api.cli.im\u002Fqr?data=http%253A%252F%252Fustbhuangyi.com%252Fsell%252F%2523%252Fgoods&level=H&transparent=false&bgcolor=%23ffffff&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&size=280&kid=cliim&key=686203a49c4613080b5b3004323ff977)\n\n[Music App advanced practical course base on Vue.js](http:\u002F\u002Fcoding.imooc.com\u002Fclass\u002F107.html)\n\n[Project demo address](http:\u002F\u002Fustbhuangyi.com\u002Fmusic\u002F)\n\n![QR Code](https:\u002F\u002Fqr.api.cli.im\u002Fqr?data=http%253A%252F%252Fustbhuangyi.com%252Fmusic%252F&level=H&transparent=false&bgcolor=%23ffffff&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&size=280&kid=cliim&key=731bbcc2b490454d2cc604f98539952c)\n","BetterScroll 是一个专为移动端（也支持PC）设计的滚动插件，旨在解决各种滚动场景下的问题。它基于iscroll实现，但提供了更多的功能和更优的滚动性能，如支持缩放、下拉刷新等，并且API与iscroll兼容。该项目使用TypeScript编写，不依赖任何外部库，确保了良好的跨平台兼容性和性能表现。适用于需要高效处理长列表、图片浏览或任何涉及复杂滚动交互的Web应用开发场景。","2026-06-11 02:56:32","top_language"]