[
{
"path": ".editorconfig",
"content": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n"
},
{
"path": ".eslintrc.js",
"content": "module.exports = {\n\troot: true,\n\tparser: 'babel-eslint',\n\tparserOptions: {\n\t\tsourceType: 'module'\n\t},\n\t// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style\n\textends: 'standard',\n env: {\n browser: true,\n },\n\t// required to lint *.vue files\n\tplugins: [\n\t\t'html'\n\t],\n\t// add your custom rules here\n\t'rules': {\n\t\t// allow paren-less arrow functions\n\t\t'arrow-parens': 0,\n\t\t// allow debugger during development\n\t\t'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,\n\t\t'indent': 0,\n 'no-tabs': 0,\n\t\t'space-before-function-paren': 0,\n 'eol-last': 0,\n 'no-unused-expressions': 0\n\t}\n};\n"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"content": "\n"
},
{
"path": ".gitignore",
"content": ".bin/\nnode_modules/\n.idea/\n.DS_Store\n.npm-debug.log\ncoverage/\n.rpt2_cache\n.vscode/\n\ndist/\nyarn-debug.log*\nyarn-error.log*\nyarn.lock\n"
},
{
"path": ".gitpod.Dockerfile",
"content": "FROM gitpod/workspace-full\n\nRUN sudo apt-get update && \\\n sudo apt-get install -y \\\n ca-certificates \\\n fonts-liberation \\\n libappindicator3-1 \\\n libasound2 \\\n libatk-bridge2.0-0 \\\n libatk1.0-0 \\\n libc6 \\\n libcairo2 \\\n libcups2 \\\n libdbus-1-3 \\\n libexpat1 \\\n libfontconfig1 \\\n libgbm1 \\\n libgcc1 \\\n libglib2.0-0 \\\n libgtk-3-0 \\\n libnspr4 \\\n libnss3 \\\n libpango-1.0-0 \\\n libpangocairo-1.0-0 \\\n libstdc++6 \\\n libx11-6 \\\n libx11-xcb1 \\\n libxcb1 \\\n libxcomposite1 \\\n libxcursor1 \\\n libxdamage1 \\\n libxext6 \\\n libxfixes3 \\\n libxi6 \\\n libxrandr2 \\\n libxrender1 \\\n libxss1 \\\n libxtst6 \\\n lsb-release \\\n wget \\\n xdg-utils && \\\n sudo rm -rf /var/lib/apt/lists/*\n\n\nRUN sudo apt-get update && \\\n sudo apt-get install -yq chromium-browser && \\\n sudo rm -rf /var/lib/apt/lists/*\n\nENV GITPOD=true\n"
},
{
"path": ".gitpod.yml",
"content": "image:\n file: .gitpod.Dockerfile\ntasks:\n - command: gp await-port 8080 && sleep 3 && gp preview $(gp url 8080)/docs\n - name: Dev\n init: yarn install && gp sync-done install\n command: yarn vue:dev\n\n - name: Docs\n init: gp sync-await install && yarn docs:build\n command: yarn docs:dev\n openMode: split-right\n\nports:\n - port: 8080\n onOpen: ignore\n - port: 8932\n onOpen: open-preview\n"
},
{
"path": ".huskyrc.json",
"content": "{\n \"hooks\": {\n \"pre-commit\": \"lint-staged\",\n \"commit-msg\": \"commitlint -E HUSKY_GIT_PARAMS\"\n }\n}\n"
},
{
"path": ".npmignore",
"content": "build/\nconfig/\ndocs/\ndoc/\nexample/\nstatic/\n.idea/\n.github/\npostcss.config.js\n.bin/\n.DS_Store\n.npm-debug.log\n.babelrc\n.npmignore\n.editorconfig\n.eslintrc.js\n.tsconfig.json\npackage-lock.json\n\n\n"
},
{
"path": ".travis.yml",
"content": "language: node_js\nsudo: false\ncache:\n directories:\n - node_modules\nnode_js:\n - \"lts/*\"\nbranches:\n only:\n - master\n - dev\nscript:\n - npm test\n - ./node_modules/.bin/codecov\n"
},
{
"path": ".yarnrc",
"content": "registry \"https://registry.npmjs.org\""
},
{
"path": "LICENSE",
"content": "The MIT License (MIT)\n\nCopyright (c) 2015 HuangYi\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n"
},
{
"path": "README.md",
"content": "# better-scroll\n\n\n\n[](https://www.npmjs.com/package/better-scroll) [](https://www.npmjs.com/package/better-scroll) [](https://travis-ci.org/ustbhuangyi/better-scroll) [](http://packagequality.com/#?package=better-scroll) [](http://codecov.io/github/ustbhuangyi/better-scroll) [](https://gitpod.io/from-referrer/)\n\n[中文文档](https://github.com/ustbhuangyi/better-scroll/blob/master/README_zh-CN.md)\n\n[1.x Docs](https://better-scroll.github.io/docs-v1/)\n\n[2.x Docs](https://better-scroll.github.io/docs/en-US/)\n\n[2.x Demo](https://better-scroll.github.io/examples/)\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/core # 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/core'\n\nlet bs = new BScroll('.wrapper', {})\n```\n\n# CDN\n\nBetterScroll with full-featured plugin.\n\n```html\n\n\n\n\n```\n\n```js\nlet wrapper = document.getElementById(\"wrapper\")\nlet bs = BetterScroll.createBScroll(wrapper, {})\n```\n\n\nOnly CoreScroll\n\n```html\n\n\n\n\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://github.com/cubiq/iscroll), 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
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n\n\n\n\n"
},
{
"path": "packages/examples/vue/components/infinity/data/message.json",
"content": "[\n \"when you popState and actually being well, we expect it further\",\n \"But I'm going to take care of ripping out my code in the fact that just something like that\",\n \"And what we'll createdCallbacks than that you can still read what each one of this should go out\",\n \"So just return Promise back and do this, the route equals\",\n \"ah, let's do a clearRoutes it says I'm not going to do\",\n \"At least trying new Promise\",\n \"then, and then it's going to check what that\",\n \"And we zoom in, then you can kind of set, except for a router\",\n \"Now strictly today\",\n \"I'm going to just takes an iterable as well be to add a visible\",\n \"Anyway, so that we'll do a link\",\n \"So what I'm going to minify this, so I'll just console\",\n \"log data for now, just sometimes look at that\",\n \"not then if we wanted to do position from the registerElements primed and red\",\n \"That isn't get called\",\n \"At all\",\n \"No\",\n \"Interesting that misc here\",\n \"So what was a regular expression\",\n \"Because once you get over doing a fancy techniques\",\n \"And let's see\",\n \"OK, we broke thing to do\",\n \"Right\",\n \"document\",\n \"" So\",\n \"Yeah\",\n \"\",\n \"which is fine\",\n \"And that we'll do sc\",\n \"view\",\n \"So what you draw the line where is it\",\n \"Where is being run\",\n \"I think, a million times look at it and styles an iteration, ES2015 update the content for is this\",\n \"routes equals Array\",\n \"from\",\n \"Hm, that might be a trade\",\n \"off, because we're just do an animation\",\n \"in the attached\",\n \"Look at this push\",\n \"pull kind of useful to have layout root here is it\",\n \"That by default, what we going to grab the\",\n \"Yes\",\n \"In router, I think, would let's say, for example\",\n \"So let's make it can be just this the hour mark on the actual contents\",\n \"We just loads though it was the way, a nice this\",\n \"Are you would be a little bit more pretty raw, this is a day, dude\",\n \"Border\",\n \"radius, that\",\n \"And I'm going to just do that will take something else\",\n \"And thank you might now\",\n \"That is the next time, I'm going to come into misc\",\n \"And somebody actually not\",\n \"source equals home\",\n \"But if I was sending me to resolve where we go\",\n \"All right\",\n \"And it makes JavaScript\",\n \"And I have run again\",\n \"Normally a massive, as I said, this is always, I'm going to call the different [INAUDIBLE] Hm\",\n \"Wow\",\n \"We have happen on screen, and the otherwise, don't want\",\n \"Yeah, and forth in the new path\",\n \"So we don't you use that might very wrong\",\n \"But in a customary bug\",\n \"Don't forget to hidden or display to none, things like a race when you are actually really long time I want to tell that is where you go\",\n \"And that work\",\n \"Yeah, and I'm going to do today\",\n \"I had misc are all the create one of the performance stuff\",\n \"But if you had lots of tea\",\n \"Yeah\",\n \"Now we're going to come in\",\n \"But did working as intended it\",\n \"So we can be able to be watching it straightforward slash\",\n \"And that, I think that will be all the like since we are valid concept for this, the root of this called HTML5 routing, which I don't know\",\n \"I just feels OK, but hopefully, and opacity 0, and it's just put a z\",\n \"index of 1 on that's going to be sort of handling of attachedCallback, and we want to transform scale very well be true for them is amazing, like across from the new one that\",\n \"You know\",\n \"Yeah, we could see now, all being we won't do this thing today\",\n \"And so this is a current view\",\n \"We have a question ties in\",\n \"Why not\",\n \"source equals router, why not\",\n \"And I think that we'd probably, if we've already to allow it to be the thing\",\n \"Oh, all right, so we get it, because I have to juggle it all\",\n \"No\",\n \"I feel I agree\",\n \"It would actually get it, because otherwise, we still have this\",\n \"routes\",\n \"keys\",\n \"So this is a layout boundary\",\n \"It's the cause\",\n \"Yeah, 3 pixels\",\n \"OK\",\n \"So since that's true\",\n \"And this stuff\",\n \"And that work\",\n \"Good point, or strict, and then the URL, changed\",\n \"But I'm going to, let's see, what we're any\",\n \"So the new view, think about\",\n \"And then we've defer, why not\",\n \"Let's fail\",\n \"So this newView, newView is never watching is I was that\",\n \"so that it's a compass\",\n \"Oh\",\n \"North, east, south, we called, all be no ES\",\n \"anything\",\n \"What I'm curious about your question here\",\n \"And I'm going to say\",\n \"so let's see\",\n \"So let's see\",\n \"So we'll say from this animations that we want to do this so that this point\",\n \"So we want us to cover next week\",\n \"We can actually\",\n \"But that they've all been set it\",\n \"Yeah\",\n \"And at the top and misc here\",\n \"But it will be run into a bit different sections\",\n \"And I think you'd want each of there's no DOM tree reason\",\n \"Well, yeah\",\n \"OK, so we have a couple of click for clicks\",\n \"And so if we see about this\",\n \"So what I think things that I really good start\",\n \"script tags at home, kids\",\n \"Don't do this file to actually\",\n \"Woo\",\n \"I made, sir\",\n \"So again, particular line of the\",\n \"let's call it sc for Supercharged\",\n \"There's no\",\n \"It's a compass\",\n \"Oh\",\n \"right\",\n \"newView, newView is the simplicity at this one anything below 2015, right\",\n \"It broke\",\n \"OK, let's see\",\n \"So we're going to removeEventListener\",\n \"You are the nicest\",\n \"something that you know, we'll create that doesn't necessarily end up with something new to these pages\",\n \"In router\",\n \"And certainly, as I said, you could usually just delete the constructor but createdCallback\",\n \"Oh, well, let link of the\",\n \"Yes\",\n \"If we had to do is I want us to come up writing apps, it can actually, this push\",\n \"pull kind of data, which version of something\",\n \"So what they can be about view or something that have a thing to do a trade\",\n \"off because you've got memory constraints and all these function\",\n \"So let's see if\",\n \"oh, do we wanted to do this\",\n \"If you're attach, what we'd want to know\",\n \"That is important think in so that goes to control of [\",\n \"UI \",\n \"] transitions, particular expression\",\n \"Right, so the otherwise, it should also work on the layout, which might because we're actually remind yourselves that I can do it\",\n \"Yeah\",\n \"So that, in theory, place all the content as well when that have new ideas\",\n \"So this should be a class list, we'll create one of these, what we'll do is I want to do\",\n \"All right, bottom, left\",\n \"Do you have definitely\",\n \"So when the mindset off chaining [INAUDIBLE] out of the same index HTML elements\",\n \"Views\",\n \"Yeah\",\n \"So I'm going to createRoutes, wee, clearRoutes equals static\",\n \"Let's do this, status is generally work\",\n \"So that's why I was building the nicest\",\n \"I'll tell you what we want to come into the panels\",\n \"On all of ES2015 updates on the path name\",\n \"Because it's an iterate what they see\",\n \"I'm going to do\",\n \"We'll do that\",\n \"And hopefully, you're here in slash about view but we're going to be whichever view was the new view is that\",\n \"so that the event that isn't get called, all subscribing to do today\",\n \"And then we're just delete the JavaScript language\",\n \"Yeah, and we need to extends HTMLElement\",\n \"And we app where we actually uncanny valid concept for the out animation\",\n \"duration\",\n \"count in one tends HTML, I think, would then we've defer, why not\",\n \"Let's see what's good on here\",\n \"So if you say layout, for example\",\n \"Yes, so one of its scope\",\n \"What we want to do, I supposed to find out\",\n \"The defer mean to your Custom Elements JavaScript says we don't have\",\n \"We don't want to say this, so one that you click back to then dot the even though it\",\n \"So there a createdCallback, so we never being us\",\n \"That doesn't it\",\n \"Right\",\n \"All right\",\n \"That should\",\n \"Oh no, Array\",\n \"from\",\n \"Hm, it shouldNotMakeMoreOutPromises\",\n \"And then let's do that is purely for simplicity at this\",\n \"I don't takes too longer and I will say this\",\n \"routes\",\n \"because it matches the current ones will now needs to be run against that going to say const view back\",\n \"And then what the createRoute\",\n \"That's what I think\",\n \"So we have to transitions, particular if branch of this, you're giving us way too much better\",\n \"So since the layout, OK\",\n \"I think we'll create objects anymore\",\n \"You let us know what I'm going to do is I'm going to do is let's just find out\",\n \"createdCallbacks\",\n \"So if view\",\n \"I could do if we don't want to make a nav\",\n \"So I'm going to do that\",\n \"Super\",\n \"route\",\n \"So for this, right now, all the like shouldNotMakeMoreOutPromise\",\n \"resolve\",\n \"Same for the power of Promise, right\",\n \"Because why not\",\n \"Let's give it or not\",\n \"The defer also means that the state by selecting the view\",\n \"No\",\n \"Interesting\",\n \"So the brand\",\n \"new thing\",\n \"So let's see, so we do that\",\n \"All being well, we end with an actually hoping I will be remove this\",\n \"Are you this\",\n \"So we want to do that, actually just kind of amazing\",\n \"You know\",\n \"Yeah\",\n \"\",\n \"which is the current view was the new one that's a layout\",\n \"I don't you ask the question ties in it is when it's like a progressive to deal with, with contain strict\",\n \"now here\",\n \"And I'm going to us\",\n \"So onChanged\",\n \"Yeah\",\n \"Because of the this\",\n \"is\",\n \"the\",\n \"active\",\n \"view\",\n \"And we are building the routes equals this\",\n \"But when the view first time we create that isn't it\",\n \"Right\",\n \"Yeah, that is amazing\",\n \"And I think, a more bugs\",\n \"Yeah, I want it to updating to do that I have new view, and some Promise, we can actually can do here\",\n \"This is Paul\",\n \"Hi\",\n \"This time I write bugs, don't like this is actual lifecycle called ES6\",\n \"ES2016 was doing that's why I wanted to say\",\n \"currentView will be fast because\",\n \"You know what, in the back to the current view\",\n \"And then we'll say return\",\n \"One of the panels\",\n \"OK\",\n \"Come of that stuff out\",\n \"Should that the evaluation from 100\",\n \"no, should add that kind of got allowing that back out, right\",\n \"newView, newView, what we're kind of got these views that you, very wrong\",\n \"But if you about using there\",\n \"Because the nav has disappear ago, it was the keyword for all the regular expression and execution of a router\",\n \"Now you know, over that, in there\",\n \"Let's do that there we already got ourselves some of the way to go\",\n \"And it matches the new one for that\",\n \"Yeah\",\n \"And certain time gaps, think it's an animating to put a route for some reason\",\n \"view\",\n \"Figure out things simplicity at this point\",\n \"So what we're being a little bit of a pickle over right now we've deep\",\n \"linked that could want it to be that\",\n \"So let's just feels very interactions back in so this\",\n \"newView\",\n \"Yeah\",\n \"And apparent, what we'd want each one of all the debugger standard one\",\n \"So this way, it should add the visible\",\n \"And we're pretty raw, there will be find out notionally, the code, it's fine, it's fail\",\n \"So the question\",\n \"Yeah, so we could see now them to makes Jav\"\n]\n"
},
{
"path": "packages/examples/vue/components/infinity/default.vue",
"content": "\n
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n
\n
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n
\n
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n
\n
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n
\n
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n
\n )\n}\n\nexport default Indicators\n"
},
{
"path": "packages/react-examples/src/pages/indicators/index.styl",
"content": ".minimap-container\n .scroll-wrapper\n width 320px\n height 180px\n overflow hidden\n .scroll-content\n width 1920px\n height 1080px\n .scroll-indicator\n margin-top 15px\n width 320px\n height 180px\n position relative\n .scroll-indicator-bg\n position absolute\n width 100%\n height 100%\n .scroll-indicator-handle\n position absolute\n border 1px solid white\n box-shadow 0 0 5px white\n width 64px\n height 36px\n z-index 1\n background-color rgba(255, 255, 255, 0.3)\n\n.parallax-scroll-container\n height 100%\n .parallax-scroll-box\n position relative\n width 100%\n height 100%\n box-sizing border-box\n border 1px solid #fe0\n .scroll-wrapper\n position absolute\n z-index 3\n top 0\n right 0\n bottom 0\n left 0\n overflow hidden\n .scroll-content\n width 100%\n height 4000px\n background: url('./components/galaxies1.png')\n .scroll-indicator\n position absolute\n top 0\n right 0\n bottom 0\n left 0\n overflow hidden\n &.stars1\n z-index 2\n &.stars2\n z-index 1\n .star1-bg\n height 3000px\n background: url('./components/galaxies2.png')\n .star2-bg\n height 2000px\n background: url('./components/stars.jpg')\n"
},
{
"path": "packages/react-examples/src/pages/infinity/data/message.json",
"content": "[\n \"when you popState and actually being well, we expect it further\",\n \"But I'm going to take care of ripping out my code in the fact that just something like that\",\n \"And what we'll createdCallbacks than that you can still read what each one of this should go out\",\n \"So just return Promise back and do this, the route equals\",\n \"ah, let's do a clearRoutes it says I'm not going to do\",\n \"At least trying new Promise\",\n \"then, and then it's going to check what that\",\n \"And we zoom in, then you can kind of set, except for a router\",\n \"Now strictly today\",\n \"I'm going to just takes an iterable as well be to add a visible\",\n \"Anyway, so that we'll do a link\",\n \"So what I'm going to minify this, so I'll just console\",\n \"log data for now, just sometimes look at that\",\n \"not then if we wanted to do position from the registerElements primed and red\",\n \"That isn't get called\",\n \"At all\",\n \"No\",\n \"Interesting that misc here\",\n \"So what was a regular expression\",\n \"Because once you get over doing a fancy techniques\",\n \"And let's see\",\n \"OK, we broke thing to do\",\n \"Right\",\n \"document\",\n \"" So\",\n \"Yeah\",\n \"\",\n \"which is fine\",\n \"And that we'll do sc\",\n \"view\",\n \"So what you draw the line where is it\",\n \"Where is being run\",\n \"I think, a million times look at it and styles an iteration, ES2015 update the content for is this\",\n \"routes equals Array\",\n \"from\",\n \"Hm, that might be a trade\",\n \"off, because we're just do an animation\",\n \"in the attached\",\n \"Look at this push\",\n \"pull kind of useful to have layout root here is it\",\n \"That by default, what we going to grab the\",\n \"Yes\",\n \"In router, I think, would let's say, for example\",\n \"So let's make it can be just this the hour mark on the actual contents\",\n \"We just loads though it was the way, a nice this\",\n \"Are you would be a little bit more pretty raw, this is a day, dude\",\n \"Border\",\n \"radius, that\",\n \"And I'm going to just do that will take something else\",\n \"And thank you might now\",\n \"That is the next time, I'm going to come into misc\",\n \"And somebody actually not\",\n \"source equals home\",\n \"But if I was sending me to resolve where we go\",\n \"All right\",\n \"And it makes JavaScript\",\n \"And I have run again\",\n \"Normally a massive, as I said, this is always, I'm going to call the different [INAUDIBLE] Hm\",\n \"Wow\",\n \"We have happen on screen, and the otherwise, don't want\",\n \"Yeah, and forth in the new path\",\n \"So we don't you use that might very wrong\",\n \"But in a customary bug\",\n \"Don't forget to hidden or display to none, things like a race when you are actually really long time I want to tell that is where you go\",\n \"And that work\",\n \"Yeah, and I'm going to do today\",\n \"I had misc are all the create one of the performance stuff\",\n \"But if you had lots of tea\",\n \"Yeah\",\n \"Now we're going to come in\",\n \"But did working as intended it\",\n \"So we can be able to be watching it straightforward slash\",\n \"And that, I think that will be all the like since we are valid concept for this, the root of this called HTML5 routing, which I don't know\",\n \"I just feels OK, but hopefully, and opacity 0, and it's just put a z\",\n \"index of 1 on that's going to be sort of handling of attachedCallback, and we want to transform scale very well be true for them is amazing, like across from the new one that\",\n \"You know\",\n \"Yeah, we could see now, all being we won't do this thing today\",\n \"And so this is a current view\",\n \"We have a question ties in\",\n \"Why not\",\n \"source equals router, why not\",\n \"And I think that we'd probably, if we've already to allow it to be the thing\",\n \"Oh, all right, so we get it, because I have to juggle it all\",\n \"No\",\n \"I feel I agree\",\n \"It would actually get it, because otherwise, we still have this\",\n \"routes\",\n \"keys\",\n \"So this is a layout boundary\",\n \"It's the cause\",\n \"Yeah, 3 pixels\",\n \"OK\",\n \"So since that's true\",\n \"And this stuff\",\n \"And that work\",\n \"Good point, or strict, and then the URL, changed\",\n \"But I'm going to, let's see, what we're any\",\n \"So the new view, think about\",\n \"And then we've defer, why not\",\n \"Let's fail\",\n \"So this newView, newView is never watching is I was that\",\n \"so that it's a compass\",\n \"Oh\",\n \"North, east, south, we called, all be no ES\",\n \"anything\",\n \"What I'm curious about your question here\",\n \"And I'm going to say\",\n \"so let's see\",\n \"So let's see\",\n \"So we'll say from this animations that we want to do this so that this point\",\n \"So we want us to cover next week\",\n \"We can actually\",\n \"But that they've all been set it\",\n \"Yeah\",\n \"And at the top and misc here\",\n \"But it will be run into a bit different sections\",\n \"And I think you'd want each of there's no DOM tree reason\",\n \"Well, yeah\",\n \"OK, so we have a couple of click for clicks\",\n \"And so if we see about this\",\n \"So what I think things that I really good start\",\n \"script tags at home, kids\",\n \"Don't do this file to actually\",\n \"Woo\",\n \"I made, sir\",\n \"So again, particular line of the\",\n \"let's call it sc for Supercharged\",\n \"There's no\",\n \"It's a compass\",\n \"Oh\",\n \"right\",\n \"newView, newView is the simplicity at this one anything below 2015, right\",\n \"It broke\",\n \"OK, let's see\",\n \"So we're going to removeEventListener\",\n \"You are the nicest\",\n \"something that you know, we'll create that doesn't necessarily end up with something new to these pages\",\n \"In router\",\n \"And certainly, as I said, you could usually just delete the constructor but createdCallback\",\n \"Oh, well, let link of the\",\n \"Yes\",\n \"If we had to do is I want us to come up writing apps, it can actually, this push\",\n \"pull kind of data, which version of something\",\n \"So what they can be about view or something that have a thing to do a trade\",\n \"off because you've got memory constraints and all these function\",\n \"So let's see if\",\n \"oh, do we wanted to do this\",\n \"If you're attach, what we'd want to know\",\n \"That is important think in so that goes to control of [\",\n \"UI \",\n \"] transitions, particular expression\",\n \"Right, so the otherwise, it should also work on the layout, which might because we're actually remind yourselves that I can do it\",\n \"Yeah\",\n \"So that, in theory, place all the content as well when that have new ideas\",\n \"So this should be a class list, we'll create one of these, what we'll do is I want to do\",\n \"All right, bottom, left\",\n \"Do you have definitely\",\n \"So when the mindset off chaining [INAUDIBLE] out of the same index HTML elements\",\n \"Views\",\n \"Yeah\",\n \"So I'm going to createRoutes, wee, clearRoutes equals static\",\n \"Let's do this, status is generally work\",\n \"So that's why I was building the nicest\",\n \"I'll tell you what we want to come into the panels\",\n \"On all of ES2015 updates on the path name\",\n \"Because it's an iterate what they see\",\n \"I'm going to do\",\n \"We'll do that\",\n \"And hopefully, you're here in slash about view but we're going to be whichever view was the new view is that\",\n \"so that the event that isn't get called, all subscribing to do today\",\n \"And then we're just delete the JavaScript language\",\n \"Yeah, and we need to extends HTMLElement\",\n \"And we app where we actually uncanny valid concept for the out animation\",\n \"duration\",\n \"count in one tends HTML, I think, would then we've defer, why not\",\n \"Let's see what's good on here\",\n \"So if you say layout, for example\",\n \"Yes, so one of its scope\",\n \"What we want to do, I supposed to find out\",\n \"The defer mean to your Custom Elements JavaScript says we don't have\",\n \"We don't want to say this, so one that you click back to then dot the even though it\",\n \"So there a createdCallback, so we never being us\",\n \"That doesn't it\",\n \"Right\",\n \"All right\",\n \"That should\",\n \"Oh no, Array\",\n \"from\",\n \"Hm, it shouldNotMakeMoreOutPromises\",\n \"And then let's do that is purely for simplicity at this\",\n \"I don't takes too longer and I will say this\",\n \"routes\",\n \"because it matches the current ones will now needs to be run against that going to say const view back\",\n \"And then what the createRoute\",\n \"That's what I think\",\n \"So we have to transitions, particular if branch of this, you're giving us way too much better\",\n \"So since the layout, OK\",\n \"I think we'll create objects anymore\",\n \"You let us know what I'm going to do is I'm going to do is let's just find out\",\n \"createdCallbacks\",\n \"So if view\",\n \"I could do if we don't want to make a nav\",\n \"So I'm going to do that\",\n \"Super\",\n \"route\",\n \"So for this, right now, all the like shouldNotMakeMoreOutPromise\",\n \"resolve\",\n \"Same for the power of Promise, right\",\n \"Because why not\",\n \"Let's give it or not\",\n \"The defer also means that the state by selecting the view\",\n \"No\",\n \"Interesting\",\n \"So the brand\",\n \"new thing\",\n \"So let's see, so we do that\",\n \"All being well, we end with an actually hoping I will be remove this\",\n \"Are you this\",\n \"So we want to do that, actually just kind of amazing\",\n \"You know\",\n \"Yeah\",\n \"\",\n \"which is the current view was the new one that's a layout\",\n \"I don't you ask the question ties in it is when it's like a progressive to deal with, with contain strict\",\n \"now here\",\n \"And I'm going to us\",\n \"So onChanged\",\n \"Yeah\",\n \"Because of the this\",\n \"is\",\n \"the\",\n \"active\",\n \"view\",\n \"And we are building the routes equals this\",\n \"But when the view first time we create that isn't it\",\n \"Right\",\n \"Yeah, that is amazing\",\n \"And I think, a more bugs\",\n \"Yeah, I want it to updating to do that I have new view, and some Promise, we can actually can do here\",\n \"This is Paul\",\n \"Hi\",\n \"This time I write bugs, don't like this is actual lifecycle called ES6\",\n \"ES2016 was doing that's why I wanted to say\",\n \"currentView will be fast because\",\n \"You know what, in the back to the current view\",\n \"And then we'll say return\",\n \"One of the panels\",\n \"OK\",\n \"Come of that stuff out\",\n \"Should that the evaluation from 100\",\n \"no, should add that kind of got allowing that back out, right\",\n \"newView, newView, what we're kind of got these views that you, very wrong\",\n \"But if you about using there\",\n \"Because the nav has disappear ago, it was the keyword for all the regular expression and execution of a router\",\n \"Now you know, over that, in there\",\n \"Let's do that there we already got ourselves some of the way to go\",\n \"And it matches the new one for that\",\n \"Yeah\",\n \"And certain time gaps, think it's an animating to put a route for some reason\",\n \"view\",\n \"Figure out things simplicity at this point\",\n \"So what we're being a little bit of a pickle over right now we've deep\",\n \"linked that could want it to be that\",\n \"So let's just feels very interactions back in so this\",\n \"newView\",\n \"Yeah\",\n \"And apparent, what we'd want each one of all the debugger standard one\",\n \"So this way, it should add the visible\",\n \"And we're pretty raw, there will be find out notionally, the code, it's fine, it's fail\",\n \"So the question\",\n \"Yeah, so we could see now them to makes Jav\"\n]\n"
},
{
"path": "packages/react-examples/src/pages/infinity/index.js",
"content": "import React, { useRef, useEffect } from 'react'\nimport BScroll from '@better-scroll/core'\nimport InfinityScroll from '@better-scroll/infinity'\n\nimport message from './data/message.json'\n\nimport './index.styl'\n\nBScroll.use(InfinityScroll)\n\nconst NUM_AVATARS = 4\nconst NUM_IMAGES = 77\nconst INIT_TIME = new Date().getTime()\n\nfunction getItem(id) {\n function pickRandom(a) {\n return a[Math.floor(Math.random() * a.length)]\n }\n\n return new Promise((resolve) => {\n const item = {\n id: id,\n avatar: Math.floor(Math.random() * NUM_AVATARS),\n self: Math.random() < 0.1,\n image:\n Math.random() < 1.0 / 20 ? Math.floor(Math.random() * NUM_IMAGES) : '',\n time: new Date(\n Math.floor(INIT_TIME + id * 20 * 1000 + Math.random() * 20 * 1000)\n ),\n message: pickRandom(message),\n }\n if (item.image === '') {\n resolve(item)\n } else {\n let image = new Image()\n image.src = require(`./image/image${item.image}.jpg`)\n image.addEventListener('load', function () {\n item.image = image\n resolve(item)\n })\n image.addEventListener('error', function () {\n item.image = ''\n resolve(item)\n })\n }\n })\n}\n\nlet nextItem = 0\nlet pageNum = 0\n\nconst InfinityPage = () => {\n const messageRef = useRef(null)\n const tombstoneRef = useRef(null)\n const wrapperRef = useRef(null)\n const scrollRef = useRef(null)\n\n useEffect(() => {\n if (!scrollRef.current) {\n const BS = (scrollRef.current = new BScroll(wrapperRef.current, {\n infinity: {\n render: (item, div) => {\n div = div || messageRef.current.cloneNode(true)\n div.dataset.id = item.id\n div.querySelector(\n '.infinity-avatar'\n ).src = require(`./image/avatar${item.avatar}.jpg`)\n div.querySelector('.infinity-bubble p').textContent =\n item.id + ' ' + item.message\n div.querySelector(\n '.infinity-bubble .infinity-posted-date'\n ).textContent = item.time.toString()\n\n let img = div.querySelector('.infinity-bubble img')\n if (item.image !== '') {\n img.style.display = ''\n img.src = item.image.src\n img.width = item.image.width\n img.height = item.image.height\n } else {\n img.src = ''\n img.style.display = 'none'\n }\n\n if (item.self) {\n div.classList.add('infinity-from-me')\n } else {\n div.classList.remove('infinity-from-me')\n }\n return div\n },\n createTombstone: () => tombstoneRef.current.cloneNode(true),\n fetch: (count) => {\n count = Math.max(30, count)\n return new Promise((resolve, reject) => {\n // Assume 50 ms per item.\n setTimeout(() => {\n if (++pageNum > 20) {\n resolve(false)\n } else {\n console.log('pageNum', pageNum)\n let items = []\n for (let i = 0; i < Math.abs(count); i++) {\n items[i] = getItem(nextItem++)\n }\n resolve(Promise.all(items))\n }\n }, 500)\n })\n },\n },\n }))\n\n BS.on('scroll', () => {\n console.log('is scrolling')\n })\n BS.on('scrollEnd', () => {\n console.log('scrollEnd')\n })\n }\n }, [])\n\n return (\n
\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.\n\nThe simplest initialization code is as follow:\n\n```javascript\nimport BScroll from '@better-scroll/core'\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:::warning\nIn BetterScroll 2.X, we split the 1.X-coupled feature into the plugin to achieve on-demand loading and reduce the volume of the package. Therefore, `@better-scroll/core` only provides the most core scrolling capabilities. If you want to implement the **pull-up load**, **pull-down refresh** function, you need to use the corresponding [plugin] (/en-US/plugins).\n:::\n\n:::tip\nBetterScroll v2.0.4 can use [specifiedIndexAsContent](./base-scroll-options.html#specifiedindexascontent-2-0-4) to specify a child element of the wrapper as BetterScroll's content.\n:::\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\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## Using BetterScroll with MVVM frameworks\n\nI wrote an article [When BetterScroll meets Vue](https://zhuanlan.zhihu.com/p/27407024) (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://github.com/didi/cube-ui/)\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://coding.imooc.com/class/74.html)\n\n[Project demo address](http://ustbhuangyi.com/sell/)\n\n\n\n[Music App advanced practical course base on Vue.js](http://coding.imooc.com/class/107.html)\n\n[Project demo address](http://ustbhuangyi.com/music/)\n\n\n"
},
{
"path": "packages/vuepress-docs/docs/en-US/guide/base-scroll-api.md",
"content": "# API\n\nIf you want to understand BetterScroll thoroughly, you need to understand the common properties of its instances, the flexible methods, and the hooks provided.\n\n## \bProperties\n\nSometimes we want to do some extensions based on BetterScroll, we need to understand some of the properties of BetterScroll. Here are a few common properties.\n\n### x\n - **Type**: `number`.\n - **Usage**: scroll horizontal axis coordinate.\n\n### y\n - **Type**: `number`.\n - **Usage**: scroll vertical axis coordinate.\n\n### maxScrollX\n - **Type**: `number`\n - **Usage**: max scrollable horizontal coordinate.\n - **Note**: horizontal scroll range is [minScrollX, maxScrollX], and maxScrollX is negative value.\n\n### minScrollX\n - **Type**: `number`\n - **Usage**: min scrollable horizontal coordinate.\n - **Note**: horizontal scroll range is [minScrollX, maxScrollX], and minScrollX is positive value.\n\n### maxScrollY\n - **Type**: `number`\n - **Usage**: max scrollable vertical coordinate\n - **Note**: vertical scroll range is [minScrollY, maxScrollY], and maxScrollY is negative value.\n\n### minScrollY\n - **Type**: `number`\n - **Usage**: min scrollable vertical coordinate\n - **Note**: vertical scroll range is [minScrollY, maxScrollY], and minScrollY is positive value.\n\n### movingDirectionX\n - **Type**: `number`\n - **Usage**: estimate the moving direction on horizontal is left or right.\n - **Note**: -1 means finger moves from left to right, 1 means moving from right to left, 0 means haven't moved.\n\n### movingDirectionY\n - **Type**: `number`\n - **Usage**: estimate the moving direction on vertical is up or down during scrolling.\n - **Note**: -1 means finger moves from up to down, 1 means from down to up, 0 means haven't moved.\n\n### directionX\n - **Type**: `number`\n - **Usage**: estimate the moving direction on horizontal between start position and end position is left or right.\n - **Note**: -1 means finger moves from up to down, 1 means from down to up, 0 means haven't moved.\n\n### directionY\n - **Type**: `number`\n - **Usage**: estimate the moving direction on vertical between start position and end position is up or down.\n - **Note**: -1 means finger moves from up to down, 1 means from down to up, 0 means haven't moved.\n\n### enabled\n - **Type**: `boolean`,\n - **Usage**: estimate whether the current scroll is enabled.\n\n### pending\n - **Type**: `boolean`,\n - **Usage**: estimate whether the current scroll is animating.\n\n## Methods\n\nBetterScroll provides a lot of flexible APIs, which are used when we implement some features based on BetterScroll, and understanding them will help to meet more complex requirements.\n\n### refresh()\n - **Arguments**: none.\n - **Return**: none.\n - **Usage**: recalculate BetterScroll to ensure scroll work properly when the structure of DOM changes.\n\n### scrollTo(x, y, time, easing, extraTransform)\n - **Arguments**:\n - `{number} x`, horizontal axis distance. (unit: px)\n - `{number} y`, vertical axis distance. (unit: px)\n - `{number} time`, animation duration. (unit: ms)\n - `{Object} easing function`, usually don't suggest modifying. If you really need to modify, please refer `packages/shared-utils/src/ease.ts`'s of source code\n - `{Object} extraTransform`, you only need to pass in this parameter if you want to modify some other properties of the CSS transform. The structure is as follows:\n ```js\n let extraTransform = {\n // \u001dstart point\n start: {\n scale: 0\n },\n // end poinnt\n end: {\n scale: 1.1\n }\n }\n bs.scrollTo(0, -60, 300, undefined, extraTransform)\n ```\n - **Return**: none.\n - **Usage**: scroll to specified position.\n\n### scrollBy(x, y, time, easing)\n - **Arguments**:\n - `{number} x`, horizontal axis changed distance. (unit: px)\n - `{number} y`, vertical axis changed distance. (unit: px)\n - `{number} time`, animation duration. (unit: ms)\n - `{Object} easing function`, usually don't suggest modifying. If you really need to modify, please refer `packages/shared-utils/src/ease.ts`.\n - **Return**: none.\n - **Usage**: scroll to specified position based on current position.\n\n### scrollToElement(el, time, offsetX, offsetY, easing)\n - **Arguments**:\n - `{DOM | string} el`, target element. If the value is a string, we will try to use querySelector get the DOM element.\n - `{number} time`, animation duration. (unit ms)\n - `{number | boolean}` offsetX, the x offset to target element，If the value is true, scroll to the center of target element.\n - `{number | boolean}` offsetY, the y offset to target element，If the value is true, scroll to the center of target element.\n - `{Object} easing function`, usually don't suggest modifying. If you really need to modify, please refer `packages/shared-utils/src/ease.ts`.\n - **Return**: none.\n - **Usage**: scroll to target element.\n\n### stop()\n - **Arguments**: none.\n - **Return**: none.\n - **Usage**: stop the scroll animation immediately.\n\n### enable()\n - **Arguments**: none.\n - **Return**: none.\n - **Usage**: enable BetterScroll. It's enabled by default.\n\n### disable()\n - **Arguments**: none.\n - **Return**: none.\n - **Usage**: disable BetterScroll. And it will make the callbacks of DOM events don't response.\n\n### destroy()\n - **Arguments**: none.\n - **Return**: none.\n - **Usage**: destroy BetterScroll，remove events and free some memory when the scroll is not needed anymore.\n\n### on(type, fn, context)\n - **Arguments**:\n - `{string} type`, event\n - `{Function} fn`, callback\n - `{Object} context`,default is `this`.\n - **Return**: none\n - **Usage**: listen for a hook on the current BScroll, such as \"scroll\", \"scrollEnd\" and so on.\n - **Example**:\n ```javascript\n import BScroll from '@BetterScroll/core'\n let scroll = new BScroll('.wrapper', {\n probeType: 3\n })\n function onScroll(pos) {\n console.log(`Now position is x: ${pos.x}, y: ${pos.y}`)\n }\n scroll.on('scroll', onScroll)\n ```\n\n### once(type, fn, context)\n - **Arguments**:\n - `{string} type`, event\n - `{Function} fn`, callback\n - `{Object} context`, default is `this`.\n - **Return**: none\n - **Usage**: listen for a custom event, but only once. The listener will be removed once it triggers for the first time.\n\n### off(type, fn)\n - **Arguments**:\n - `{string} type`, event\n - `{Function} fn`, callback\n - **Return**: none\n - **Usage**: remove custom event listener. Only remove the listener for that specific callback.\n - **Example**:\n ```javascript\n import BScroll from '@BetterScroll/core'\n let scroll = new BScroll('.wrapper', {\n probeType: 3\n })\n function handler() {\n console.log('bs is scrolling now')\n }\n scroll.on('scroll', handler)\n\n scroll.off('scroll', handler)\n ```\n\n## Events VS Hooks\n\nBased on the 2.x architecture design and compatibility with 1.x events, we have extended two concepts-\"**Events**\" and \"**Hooks**\". Basically, they are all instances of `EventEmitter`, but they are called differently. Let's explain it from the excerpted source code below:\n\n```typescript\n export default BScrollCore extends EventEmitter {\n hooks: EventEmitter\n }\n```\n\n - **BScrollCore**\n\n It inherits EventEmitter itself. we all call it \"**event**\".\n\n ```js\n import BScroll from '@better-scroll/core'\n let bs = new BScroll('.wrapper', {})\n\n // listen bs scroll event\n bs.on('scroll', () => {})\n // listen bs refresh event\n bs.on('refresh', () => {})\n ```\n\n - **BScrollCore.hooks**\n\n Hooks are also instances of EventEmitter. we all call it \"**hook**\".\n\n ```js\n import BScroll from '@better-scroll/core'\n let bs = new BScroll('.wrapper', {})\n\n // tap bs refresh hook\n bs.hooks.on('refresh', () => {})\n // tap bs enable hook\n bs.hooks.on('enable', () => {})\n ```\n\nI believe everyone now has a better distinction between the two. \"**Event**\" is for the compatibility of 1.x. Users generally pay attention to the distribution of events, but if you want to write a plugin, you should focus on \"**hooks**\".\n\n## Events\n\nIn 2.0, BetterScroll events are almost same with 1.x events. Only BetterScroll will dispatch \"**events**\". If you need to expose events when writing plugins, you should also dispatch them through BetterScroll. [details is here](../plugins/how-to-write.html), the current events are divided into the following types:\n\n - **refresh**\n - **Trigger timing**: BetterScroll recalculate\n\n ```js\n import BetterScroll from '@better-scroll/core'\n\n const bs = new BetterScroll('.wrapper', {})\n\n bs.on('refresh', () => {})\n ```\n\n - **enable**\n - **Trigger timing**: BetterScroll is enabled and starts to respond to user interaction\n\n ```js\n bs.on('enable', () => {})\n ```\n\n - **disable**\n - **Trigger timing**: BetterScroll is disabled and no longer responds to user interaction\n\n ```js\n bs.on('disable', () => {})\n ```\n\n - **beforeScrollStart**\n - **Trigger timing**: When the user's finger is placed on the scroll area\n\n ```js\n bs.on('beforeScrollStart', () => {})\n ```\n\n - **scrollStart**\n - **Trigger timing**: Content element meets the scrolling conditions and will start scrolling\n\n ```js\n bs.on('scrollStart', () => {})\n ```\n\n - **scroll**\n - **Trigger timing**: It is scrolling\n\n ```js\n bs.on('scroll', (position) => {\n console.log(position.x, position.y)\n })\n ```\n\n - **scrollEnd**\n - **Trigger timing**: End of scrolling, or force a content that is scrolling to stop\n\n ```js\n bs.on('scrollEnd', () => {})\n ```\n\n - **scrollCancel**\n - **Trigger timing**: Scroll cancel\n\n ```js\n bs.on('scrollCancel', () => {})\n ```\n\n - **touchEnd**\n - **Trigger timing**: User finger leaves the scroll area\n\n ```js\n bs.on('touchEnd', () => {})\n ```\n\n - **flick**\n - **Trigger timing**: User triggered flick operation\n\n ```js\n bs.on('flick', () => {})\n ```\n\n - **destroy**\n - **Trigger timing**: BetterScroll destroyed\n\n ```js\n bs.on('destroy', () => {})\n ```\n\n - **contentChanged** \n - **Trigger timing**: When calling `bs.refresh()`, it is detected that the content DOM has become other elements\n\n ```typescript\n // bs version >= 2.0.4\n bs.on('contentChanged', (newContent: HTMLElement) => {})\n ```\n\nThe following events must be registered for the **plugin** in parentheses to be dispatched:\n\n - **alterOptions(__mouse-wheel__)**\n - **Trigger timing**: mouse-wheel scroll starts\n\n ```js\n import BetterScroll from '@better-scroll/core'\n import MouseWheel from '@better-scroll/mouse-wheel'\n\n BetterScroll.use(MouseWheel)\n const bs = new BetterScroll('.wrapper', {\n mouseWheel: true\n })\n\n bs.on('alterOptions', (mouseWheelOptions) => {\n /**\n * mouseWheelOptions.speed\n * mouseWheelOptions.invert\n * mouseWheelOptions.easeTime\n * mouseWheelOptions.discreteTime\n * mouseWheelOptions.throttleTime\n * mouseWheelOptions.dampingFactor\n **/\n\n // please see details in mouse-wheel plugin doc\n })\n ```\n\n - **mousewheelStart(__mouse-wheel__)**\n - **Trigger timing**: mouse-wheel scroll starts\n\n ```js\n import BetterScroll from '@better-scroll/core'\n import MouseWheel from '@better-scroll/mouse-wheel'\n\n BetterScroll.use(MouseWheel)\n const bs = new BetterScroll('.wrapper', {\n mouseWheel: true\n })\n\n bs.on('mousewheelStart', () => {})\n ```\n\n - **mousewheelMove(__mouse-wheel__)**\n - **Trigger timing**: mouse-wheel is scrolling\n\n ```js\n bs.on('mousewheelMove', () => {})\n ```\n\n - **mousewheelEnd(__mouse-wheel__)**\n - **Trigger timing**: mouse-wheel scrollEnd\n\n ```js\n bs.on('mousewheelEnd', () => {})\n ```\n\n - **pullingDown(__pull-down__)**\n - **Trigger timing**: When the top pull-down distance exceeds the threshold\n\n ```js\n import BetterScroll from '@better-scroll/core'\n import PullDown from '@better-scroll/pull-down'\n\n BetterScroll.use(PullDown)\n const bs = new BetterScroll('.wrapper', {\n pullDownRefresh: true\n })\n\n bs.on('pullingDown', () => {\n await fetchData()\n bs.finishPullDown()\n })\n ```\n\n - **pullingUp(__pull-up__)**\n - **Trigger timing**: When the bottom pull-up distance exceeds the threshold\n\n ```js\n import BetterScroll from '@better-scroll/core'\n import PullUp from '@better-scroll/pull-up'\n\n BetterScroll.use(PullUp)\n const bs = new BetterScroll('.wrapper', {\n pullUpLoad: true\n })\n\n bs.on('pullingUp', () => {\n await fetchData()\n bs.finishPullUp()\n })\n ```\n\n - **slideWillChange(__slide__)**\n - **Trigger timing**: The slide is about to switch page\n\n ```js\n import BetterScroll from '@better-scroll/core'\n import Slide from '@better-scroll/slide'\n\n BetterScroll.use(Slide)\n\n const bs = new BetterScroll('.wrapper', {\n slide: true,\n momentum: false,\n bounce: false,\n probeType: 2\n })\n\n bs.on('slideWillChange', (page) => {\n // Page about to switch\n console.log(page.pageX, page.pageY)\n })\n ```\n\n - **beforeZoomStart(__zoom__)**\n - **Trigger timing**: When two fingers touch the zoom element\n\n ```js\n import BetterScroll from '@better-scroll/core'\n import Zoom from '@better-scroll/zoom'\n\n BetterScroll.use(Zoom)\n\n const bs = new BetterScroll('.wrapper', {\n zoom: true\n })\n\n bs.on('beforeZoomStart', () => {})\n ```\n\n - **zoomStart(__zoom__)**\n - **Trigger timing**: Two-finger zoom distance exceeds the minimum threshold\n\n ```js\n bs.on('zoomStart', () => {})\n ```\n\n - **zooming(__zoom__)**\n - **Trigger timing**: While the two-finger zoom behavior is in progress\n\n ```js\n bs.on('zooming', ({ scale }) => {\n // current scale\n })\n ```\n\n - **zoomEnd(__zoom__)**\n - **Trigger timing**: After the two-finger zoom action ends\n\n ```js\n bs.on('zoomEnd', ({ scale }) => {})\n ```\n\n## Hooks\n\nA hook is a concept extended from version 2.0. Its essence is the same as an event. It is an instance of EventEmitter, which is a typical subscription publishing model. As the smallest scroll unit, BScrollCore also has many functional classes inside. Each functional class has a property called hooks, which bridges the communication between different classes. If you want to write a complex plugin, hooks must be mastered.\n\n - **BScrollCore.hooks**\n\n - **beforeInitialScrollTo**\n - **Trigger timing**: After initial loading the plugin, you need to scroll to the specified position\n - **Arguments**: position object\n - `{ x: number, y: number }`\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n bs.hooks.on('beforeInitialScrollTo', (postion) => {\n postion.x = 0\n position.y = -200 // Initialize scroll to -200\n })\n ```\n\n - **refresh**\n - **Trigger timing**: Recalculate BetterScroll\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n bs.hooks.on('refresh', () => { console.log('refreshed') })\n ```\n\n - **enable**\n - **Trigger timing**: Enable BetterScroll to respond to user behavior\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n bs.hooks.on('enable', () => { console.log('enabled') })\n ```\n\n - **disable**\n - **Trigger timing**: Disable BetterScroll and no longer respond to user behavior\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n bs.hooks.on('disable', () => { console.log('disabled') })\n ```\n\n - **destroy**\n - **Trigger timing**: Destroy BetterScroll\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n bs.hooks.on('destroy', () => { console.log('destroyed') })\n ```\n\n - **contentChanged** \n - **Trigger timing**：When calling `bs.refresh()`, it is detected that the content DOM has become other elements\n - **Usage**\n ```typescript\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n // bs version >= 2.0.4\n bs.hooks.on('contentChanged', (newContent: HTMLElement) => { console.log(newContent) })\n ```\n\n\n - **ActionsHandler.hooks**\n\n - **beforeStart**\n - **Trigger timing**: Just respond to the touchstart event, but the position of the finger on the screen has not been recorded\n - **Arguments**: event object\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.actionsHandler.hooks\n hooks.on('beforeStart', (event) => { console.log(event.target) })\n ```\n\n - **start**\n - **Trigger timing**: After recording the position of the finger on the screen, touchmove will be triggered\n - **Arguments**: event object\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.actionsHandler.hooks\n hooks.on('start', (event) => { console.log(event.target) })\n ```\n\n - **move**\n - **Trigger timing**: Responding to the touchmove event, after recording the position of the finger on the screen\n - **Arguments**: Objects with the following properties\n - `{ number } deltaX`: x offset\n - `{ number } deltaY`: y offset\n - `{ event } e`: event object\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.actionsHandler.hooks\n hooks.on('move', ({ deltaX, deltaY, e }) => {})\n ```\n\n - **end**\n - **Trigger timing**: Responding to touchend event\n - **Arguments**: event object\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.actionsHandler.hooks\n hooks.on('end', (event) => {})\n ```\n\n - **click**\n - **Trigger timing**: Trigger the click event\n - **Arguments**: event object\n\n - **ScrollerActions.hooks**\n\n - **start**\n - **Trigger timing**: After recording all the scrolling initial information\n - **Arguments**: event object\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.actions.hooks\n hooks.on('start', (event) => { console.log(event.target) })\n ```\n\n - **beforeMove**\n - **Trigger timing**: Before checking whether it is legal scrolling\n - **Arguments**: event object\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.actions.hooks\n hooks.on('beforeMove', (event) => { console.log(event.target) })\n ```\n\n - **scrollStart**\n - **Trigger timing**: scroll is abount to start\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.actions.hooks\n hooks.on('scrollStart', () => {})\n ```\n\n - **scroll**\n - **Trigger timing**: It is scrolling\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.actions.hooks\n hooks.on('scroll', () => {})\n ```\n\n - **beforeEnd**\n - **Trigger timing**: The touchend event callback has just been executed, but the final position has not been updated\n - **Arguments**: event object\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.actions.hooks\n hooks.on('beforeEnd', (event) => { console.log(event) })\n ```\n\n - **end**\n - **Trigger timing**: Just execute the touchend event callback and update the scroll direction\n - **Arguments**: Two Arguments, the first is the event object, the second is the current position\n - `{ event } e`: event object\n - `{ x: number, y: number } postion`: current position\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.actions.hooks\n hooks.on('end', (e, postion) => { console.log(e) })\n ```\n\n - **scrollEnd**\n - **Trigger timing**: Scrolling is about to end, but you still need to verify whether a scrolling behavior triggers flick and momentum behaviors.\n - **Arguments**: Two Arguments, the first is the current position, the second is the animation duration\n - `{ x: number, y: number } postion`: current position\n - `{ number } duration`: animation duration\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.actions.hooks\n hooks.on('beforeEnd', (pos, duration) => { console.log(pos) })\n ```\n\n - **coordinateTransformation**\n - **Trigger timing**: After calculating the offset of the user's finger, before scrolling occurs\n - **Arguments**: transformateDeltaData object\n - `{ deltaX: number, deltaY: number } transformateDeltaData`\n - **Usage**\n ```js\n let bs = new BScroll('.wrapper', {\n quadrant: 1 // default value\n })\n bs.scroller.actions.hooks.on(\n 'coordinateTransformation',\n (transformateDeltaData) => {\n // get user finger moved distance\n const originDeltaX = transformateDeltaData.deltaX\n const originDeltaY = transformateDeltaData.deltaY\n\n // apply transformation\n transformateDeltaData.deltaX = originDeltaY\n transformateDeltaData.deltaY = originDeltaX\n\n // transformateDeltaData.deltaX will be used as content DOM style's translateX\n // transformateDeltaData.deltaY will be used as content DOM style's translateY\n }\n )\n ```\n\n This hook is usually to fix the logic of user-defined displacement transformation when the ancestor element of the wrapper DOM of BetterScroll is rotated. In most cases, it only needs to be configured [quadrant](./base-scroll-options.html#quadrant).\n\n - **Behavior.hooks**\n\n - **beforeComputeBoundary**\n - **Trigger timing**: About to calculate the scroll boundary\n - **Arguments**: boundary object\n - `{ minScrollPos: number, maxScrollPos: number } boundary`\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.scrollBehaviorX.hooks\n hooks.on('beforeComputeBoundary', () => {})\n ```\n\n - **computeBoundary**\n - **Trigger timing**: Calculate the scroll boundary\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.scrollBehaviorX.hooks\n hooks.on('computeBoundary', (boundary) => {\n // The maximum value of the upper boundary, the more positive, the greater the pull down\n console.log(boundary.minScrollPos)\n // The minimum value of the lower boundary, the more negative, the farther you roll\n console.log(boundary.maxScrollPos)\n })\n ```\n\n - **momentum**\n - **Trigger timing**: Meet the conditions for triggering momentum animation, and before calculating distance\n - **Arguments**: Two Arguments, the first is the momentumData object, the second is the scroll offset\n - `{ destination: number, duration: number, rate: number} momentumData`: destination is the target position, duration is the easing time, rate is the slope\n - `{ number } distance`: Scroll offset to trigger momentum\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.scrollBehaviorX.hooks\n hooks.on('momentum', (momentumData, distance) => {})\n ```\n\n - **end**\n - **Trigger timing**: Does not meet the conditions for triggering momentum animation\n - **Arguments**: momentumInfo object\n - `{ destination: number, duration: number} momentumInfo`: destination is the target position, duration is the easing time\n - **Usage**\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.scrollBehaviorX.hooks\n hooks.on('end', (momentumInfo) => {\n console.log(momentumInfo.destination)\n console.log(momentumInfo.duration)\n })\n ```\n\n - **Animation.hooks(useTransition: false)**\n\n - **forceStop**\n - **Trigger timing**: Force a scrolling bs to stop\n - **Arguments**: position object\n - `{ x: number, y: number } position`\n\n - **move**\n - **Trigger timing**: Scrolling\n - **Arguments**: position object\n - `{ x: number, y: number } position`\n\n - **end**\n - **Trigger timing**: Scroll ended\n - **Arguments**: position object\n - `{ x: number, y: number } position`\n\n - **Transition.hooks(useTransition: true)**\n\n - **forceStop**\n - **Trigger timing**: Force a bs that is doing animation to stop\n - **Arguments**: position object\n - `{ x: number, y: number } position`\n\n - **move**\n - **Trigger timing**: Scrolling\n - **Arguments**: position object\n - `{ x: number, y: number } position`\n\n - **end**\n - **Trigger timing**: Scroll ended\n - **Arguments**:position object\n - `{ x: number, y: number } position`\n\n - **time**\n - **Trigger timing**: Before the CSS3 transition started, the wheel plugin listened to the hook\n - **Arguments**: CSS3 transition duration\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.animater.hooks\n hooks.on('time', (duration) => {\n console.log(duration) // 800\n })\n ```\n\n - **timeFunction**\n - **Trigger timing**: Before the CSS3 transition started, the wheel plugin listened to the hook\n - **Arguments**: CSS3 transition-timing-function\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.animater.hooks\n hooks.on('timeFunction', (easing) => {\n console.log(easing) // cubic-bezier(0.1, 0.7, 1.0, 0.1)\n })\n ```\n\n - **Translater.hooks**\n\n - **beforeTranslate**\n - **Trigger timing**: Before modifying the transform style of the content element, the zoom plugin listened to the hook\n - **Arguments**: The first is the transformStyle array, the second is the point object\n - `{ ['translateX(0px)'|'translateY(0px)'] } transformStyle`: The property value corresponding to the current transform\n - `{ x: number, y: number } point`: x corresponds to the value of translateX, y corresponds to the value of translateY\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.translater.hooks\n hooks.on('beforeTranslate', (transformStyle, point) => {\n transformStyle.push('scale(1.2)')\n console.log(transformStyle) // ['translateX(0px)', 'translateY(0px)', 'scale(1.2)']\n console.log(point) // { x: 0, y: 0 }\n })\n ```\n\n - **translate**\n - **Trigger timing**: After modifying the transform style of the content element, the wheel plugin listened to the hook\n - **Arguments**: point object\n - `{ x: number, y: number } point`: x corresponds to the value of translateX, y corresponds to the value of translateY\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.translater.hooks\n hooks.on('translate', (point) => {\n console.log(point) // { x: 0, y: 0 }\n })\n ```\n\n - **Scroller.hooks**\n\n - **beforeStart**\n same with `ScrollerActions.hooks.start`\n\n - **beforeMove**\n same with `ScrollerActions.hooks.beforeMove`\n\n - **beforeScrollStart**\n same with `ScrollerActions.hooks.start`\n\n - **scrollStart**\n same with `ScrollerActions.hooks.scrollStart`\n\n - **scroll**\n - **Trigger timing**: Scrolling\n - **Arguments**: position object\n - `{ x: number, y: number } position`\n\n - **beforeEnd**\n same with `ScrollerActions.hooks.beforeEnd`\n\n - **touchEnd**\n - **Trigger timing**: User finger leaves the scroll area\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.hooks\n hooks.on('touchEnd', () => {\n console.log('your finger has leave')\n })\n ```\n\n - **end**\n - **Trigger timing**: After touchEnd, it is triggered before verifying click. The pull-down plugin is implemented based on this hook\n - **Arguments**: position object\n - `{ x: number, y: number } position`\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.hooks\n hooks.on('end', (position) => {\n console.log(position.x)\n console.log(position.y)\n })\n ```\n\n - **scrollEnd**\n - **Trigger timing**: Scroll ended\n - **Arguments**: position object\n - `{ x: number, y: number } position`\n\n - **resize**\n - **Trigger timing**: window size changed\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.hooks\n hooks.on('resize', () => {\n console.log(\"window's size has changed\")\n })\n ```\n\n - **flick**\n - **Trigger timing**: Finger flicking detected\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.hooks\n hooks.on('flick', () => {})\n ```\n\n - **scrollCancel**\n - **Trigger timing**: Scroll canceled or did not happen\n\n - **momentum**\n - **Trigger timing**: Momentum displacement is about to begin, and the slide plugin listens to the hook\n - **Arguments**: scrollMetaData object\n - `{ time: number, easing: EaseItem, newX: number, newY: number }`: time is the duration of the animation, easing is the easing function, newX and newY are the end points\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.hooks\n hooks.on('momentum', (scrollMetaData) => {\n scrollMetaData.newX = 0\n scrollMetaData.newY = -200\n })\n ```\n\n - **scrollTo**\n - **Trigger timing**: Triggered when the bs.scrollTo method is called\n - **Arguments**: endPoint object\n - `{ x: number, y: number } endPoint`\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.hooks\n hooks.on('scrollTo', (endPoint) => {\n console.log(endPoint.x)\n console.log(endPoint.y)\n })\n bs.scrollTo(0, -200)\n ```\n\n - **scrollToElement**\n - **Trigger timing**: Triggered when the bs.scrollToElement method is called, and the wheel plugin listens to the hook\n - **Arguments**: The first is the target DOM object, the second is the coordinates of the end point\n - `{ HTMLElment } el`\n - `{ top: number, left: number } postion`\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.hooks\n hooks.on('scrollToElement', (el, pos) => {\n console.log(el)\n console.log(pos.left)\n console.log(pos.top)\n })\n bs.scrollToElement('.some-item', 300, true, true)\n ```\n\n - **beforeRefresh**\n - **Trigger timing**: Before behavior calculates the boundary, the slide plugin listens to the hook\n ```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.wrapper', {})\n const hooks = bs.scroller.hooks\n hooks.on('beforeRefresh', () => {})\n ```\n\n::: tip\nIf you are careful, you will find that some Scroller.hooks have exactly the same functions as ScrollActions.hooks. In fact, we internally use a [hook bubbling](https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/core/src/utils/bubbling.ts) strategy to proxy the hooks of the inner function classes to the BetterScroll Instance in the form of bubbling to be compatible with the use of 1.x.\n:::"
},
{
"path": "packages/vuepress-docs/docs/en-US/guide/base-scroll-options.md",
"content": "# Options\n\nBetterScroll supports rich options configuration, you can pass them in the second parameter when initializing, for example:\n\n```js\nimport BScroll from '@better-scroll/core'\nlet scroll = new BScroll('.wrapper',{\n scrollY: true,\n click: true\n})\n```\n\nThis implements a list of vertical clickable scrolling effects. so let's list the parameters supported by BetterScroll.\n\n## startX\n - **Type**: `number`\n - **Default**: `0`\n - **Details**: Initialize the postion in the horizontal axis direction.\n\n## startY\n - **Type**: `number`\n - **Default**: `0`\n - **Details**: Initialize the postion in the vertical axis direction.\n\n## scrollX\n - **Type**: `boolean`\n - **Default**: `false`\n - **Usage**: When set to true, horizontal scrolling would be enabled\n - **Note**: This configuration is invalid when setting [eventPassthrough](./base-scroll-options.html#eventpassthrough) to 'horizontal'.\n\n## scrollY\n - **Type**: `boolean`\n - **Default**: `true`\n - **Usage**: When set to true, vertical scrolling would be enabled\n - **Note**: This configuration is invalid when setting [eventPassthrough](./base-scroll-options.html#eventpassthrough) to 'vertical'.\n\n## freeScroll\n - **Type**: `boolean`\n - **Default**: `false`\n - **Usage**: By default, because human fingers cannot perform absolute vertical or horizontal movement, there will be horizontal and vertical offsets during a finger operation. The internal default will abandon the smaller offset direction , Keep scrolling in the other direction. But in some scenes, we need to calculate the horizontal and vertical finger offset distances at the same time, instead of only calculating the direction with a larger offset. At this time, we only need to set `freeScroll` to true.\n - **Note**: This configuration is invalid when [eventPassthrough](./base-scroll-options.html#eventpassthrough) isn't set to empty.\n - **Examples**\n ```js\n // finger startpoint -> e1: { pageX: 120, pageY: 120 }\n // finger endpoint -> e2: { pageX: 121, pageY: 140 }\n // offsetX: e2.pageX - e1.pageX = 1\n // offsetY: e2.pageY - e1.pageY = 20\n // if freeScroll is false, due to offsetY > offsetX + directionLockThreshold\n // offsetX is fixed to be 0, only calculate offsetY, thus do a vertical scroll!\n ```\n\n## directionLockThreshold\n - **Type**: `number`\n - **Default**: `5`\n - **Usage**: when `freeScroll` is false, we need to lock the scrolling only in one direction, we calculate the numerical difference between the absolute values of horizontal axis and vertical axis' scrolling distance at the initialization time of scrolling. When the value of the numerical difference is greater than `directionLockThreshold`, the lock direction can be determined.\n - **Note**: If [eventPassthrough](./base-scroll-options.html#eventpassthrough) is set, `directionLockThreshold` is invalid and will always be 0.\n\n## eventPassthrough\n - **Type**: `string`\n - **Default**: `''`\n - Optional value: `vertical | horizontal`\n - **Usage**: Sometimes we want to preserve native vertical scroll but being able to add an horizontal BetterScroll (maybe a carousel). Set this to 'vertical' and the BetterScroll area will react to horizontal swipes only. Vertical swipes will naturally scroll the whole page. Contrarily, set this to 'horizontal' when you want to keep natural horizontal scroll.\n - **Note**: The setting of `eventPassthrough` will cause some other settings to be invalid, be careful when using it.\n\n## click\n - **Type**: `boolean`\n - **Default**: `false`\n - **Usage**: To override the native scrolling BetterScroll has to inhibit some default browser behaviors, such as mouse clicks. If you want your application to respond to the click event you have to explicitly set this option to `true`. And then BetterScroll will add a private attribute called `_constructed` to the dispatched event whose value is true.\n\n\n## dblclick\n - **Type**: `boolean | Object`\n - **Default**: `false`\n - **Usage**: Send dblclick event. When configured to true, by default the two times click delay is 300 ms. If configured to an object, the `delay` can be modified.\n ```js\n\tdblclick: {\n\t\tdelay: 300\n\t}\n ```\n\n## tap\n - **Type**: `string`\n - **Default**: `''`\n - **Details**: Since BetterScroll will block the native click event, we can set tap to 'tap', which will dispatch a tap event when the region is clicked. You can listen to it as if it were listening to native events.\n\n## bounce\n - **Type**: `boolean | Object`\n - **Default**: `true`\n - **Details**: When the content element meets the boundary it performs a small bounce animation. Setting this to true will enable the animation.\n ```js\n\t\tbounce: {\n\t\t\ttop: true,\n\t\t\tbottom: true,\n\t\t\tleft: true,\n\t\t\tright: true\n\t\t}\n ```\n `bounce` can support the effect of closing the back of some edges. You can set the `key` of the corresponding side to `false`.\n\n :::tip\n If you want to conveniently set all edges to **true** or **false**, you only need to set `bounce` to **true** or **false**.\n :::\n\n\n## bounceTime\n - **Type**: `number`\n - **Default**: Default: `800` (ms, modification is not recommended)\n - **Details**: Set the duration in millisecond of the bounce animation.\n\n## momentum\n - **Type**: `boolean`\n - **Default**: `true`\n - **Usage**: If setted to true, you can turn on the momentum animation when the user quickly flicks on screen.\n\n## momentumLimitTime\n - **Type**: `number`\n - **Default**: `300` (ms)\n - **Usage**: Only when the time of the user's flicking on screen is lower than `momentumLimitTime` resulting in the momentum animation.\n\n## momentumLimitDistance\n - **Type**: `number`\n - **Default**: `15` (px)\n - **Usage**: Only when the distance of the user's flicking on screen is greater than `momentumLimitTime` resulting in the momentum animation.\n\n## swipeTime\n - **Type**: `number`\n - **Default**: `2500` (ms)\n - **Usage**: Set the duration in millisecond of the momentum animation.\n\n## swipeBounceTime\n - **Type**: `number`\n - **Default**: `500` (ms)\n - **Usage**: Set the entire bounce animation time when the content element meets the boundary in the case of running a momentum animation.\n\n## deceleration\n - **Type**: `number`\n - **Default**: `0.0015`\n - **Usage**: Represent the deceleration of the momentum animation.\n\n## flickLimitTime\n - **Type**: `number`\n - **Default**: `200`\n - **Usage**: Sometimes we want to cpture the user's flick action (slide a short distance in a short time). Only when the time of the user slide on screen is shorter than `flickLimitTime`, it is considered as a flick action.\n\n## flickLimitDistance\n - **Type**: `number`\n - **Default**: `100`\n - **Usage**: Only when the distance of the user slide on screen is shorter than `flickLimitDistance`, it is considered as a flick action\n\n## resizePolling\n - **Type**: `number`\n - **Default**: `60` (ms)\n - **Usage**: When you resize the window BetterScroll has to recalculate elements position and dimension. This might be a pretty daunting task for the poor little fella. To give it some rest the polling is set to 60 milliseconds and it is reasonable value.\n\n## probeType\n - **Type**: `number`\n - **Default**: `0`\n - **Optional Value**: `1 | 2 | 3`\n - **Usage**: Deciding whether to dispatch the scroll event, this has an impact on the performance of the page, especially in the mode where `useTransition` is true.\n\n ```js\n // There are two scenarios for dispatching scroll:\n // 1. The finger acts on the scrolling area (content DOM),\n // 2. Invoke the scrollTo method or trigger the momentum scroll animation (in fact, the implementation is still Invoking the scrollTo method)\n\n // For the v2.1.0, the probeType has been unified\n\n // The probeType is:\n // 0, scroll event will not be dispatched at any time，\n // 1, and only when the finger is moving on the scroll area, a scroll event is dispatched every momentumLimitTime milliseconds.\n // 2, and only when the finger is moving on the scroll area, a scroll event is dispatched all the time.\n // 3, scroll events are dispatched at any time, including invoking scrollTo or triggering momentum\n ```\n\n## preventDefault\n - **Type**: `boolean`\n - **Default**: `true`\n - **Usage**: Whether or not to `preventDefault()` when events are fired. This should be left `true` unless you really know what you are doing.\n\n## preventDefaultException\n - **Type**: Object\n - **Default**: `{ tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|AUDIO)$/ }`\n - **Usage**: BetterScroll will inhibit the native scrolling and meanwhile inhibit some native components' default behaviours. In this situation, we can't 'preventDefault' on these elements, so we can configure 'preventDefaultException'. Default `{tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|AUDIO)$/}` represents that default behaviours of elements with tagnames like 'input', 'textarea', 'button', 'select', 'audio' will not be inhibited\n - **Note**: This is a pretty powerful option. Its key is the attribute value of DOM elements, the corresponding value can be a regular expression. For example, if we want to configure the element whose class name is 'test', then the configuration is `{className:/(^|\\s)test(\\s|$)/}`.\n\n## tagException\n - **Type**: `Object`\n - **Default**: `{ tagName: /^TEXTAREA$/ }`\n - **Usage**: If BetterScroll nests form elements such as `textarea`, the user's expectation should be that sliding textarea should not cause bs scrolling. If the manipulated DOM (eg:textarea tag) hits the configured rule, `bs` won't scroll.\n - **Note**: This is a pretty powerful option. Its key is the attribute value of DOM elements, the corresponding value can be a regular expression. For example, if we want to configure the element whose class name is 'test', then the configuration is `{className:/(^|\\s)test(\\s|$)/}`.\n\n## HWCompositing\n - **Type**: `boolean`\n - **Default**: `true`\n - **Usage**: This option tries to put the content element on the hardware layer by appending `translateZ(1px)` to the transform CSS property. This greatly increases performance especially on mobile and achieve a good scrolling effect.\n - **Note**: Only browsers that support enabling hardware acceleration has the effect.\n\n## useTransition\n - **Type**: `boolean`\n - **Default**: `true`\n - **Usage**: Whether to use CSS3 transition animation. If setted to false, the engine will use `requestAnimationFrame` to do animation.\n\n## bindToWrapper\n - **Type**: `boolean`\n - **Default**: `false`\n - **Usage**: The `touchmove` event is normally bound to the document and not the scroll wrapper. When you move the cursor out of the wrapper the scrolling keeps going(only works in PC). This is usually what you want, but you can also bind the move event to wrapper itself. Doing so as soon as the cursor leaves the wrapper the scroll stops.\n - **Note**: For the mobile, even if the touchmove event is bound to the wrapper, the wrapper can still be moved if the finger leaves the wrapper.\n\n## disableMouse\n - **Type**: `boolean`\n - **Default**: get the result by current browser environment\n - **Usage**: When in mobile environment (supporting touch event), disableMouse will be `true` and mouse event will not be listened. While in PC environment, disableMouse will be `false` and mouse event will be listened.\n\n## disableTouch\n - **Type**: `boolean`\n - **Default**: get the result by current browser environment\n - **Usage**: When in mobile environment (supporting touch event), `disableTouch` will be `false` and touch event will be listened. While in PC environment, `disableMouse` will be `true` and touch event will not be listened. We suggest not modifying this unless you konw what you are doing.\n\n ::: warning\n Considering some specific scenarios of the user, such as **the tablet needs to support the touch event, the tablet with mouse has to support the mouse event**, In other words, if you need to listen to the touch and mouse events at the same time, then the instantiation of BetterScroll needs to be configured as follows:\n\n ```js\n let bs = new BScroll('.wrapper', {\n disableMouse: false,\n disableTouch: false\n })\n ```\n\n Due to the different bottom-level implementation logic of different devices and different browser environments, BetterScroll's internal calculations of whether to listen to `touch` or `mouse` events may make wrong judgment, so you can solve this type of problem according to the above option configuration.\n :::\n\n## autoBlur\n - **Type**: `boolean`\n - **Default**: `true`\n - **Usage**: It will auto blur the active element(input、textarea) before scroll start.\n\n## stopPropagation\n - **Type**: `boolean`\n - **Default**: `false`\n - **Usage**: Whether stop event propagation. It is often used in nested scroll scenes.\n\n## bindToTarget\n - **Type**: `boolean`\n - **Default**: `false`\n - **Usage**: Bind touch or mouse events to the `content` element instead of the container `wrapper`, which is mostly used in [movable](../plugins/movable.html).\n\n## autoEndDistance\n - **Type**: `number`\n - **Default**: `5`\n - **Usage**: When the finger operation is crazy, the `touchend` event may not be triggered when sliding out of the viewport, so the function of autoEndDistance is to automatically call the touchend event when the finger is about to leave the current viewport. When the default distance is 5px from the boundary, the scrolling ends.\n\n## outOfBoundaryDampingFactor\n - **Type**: `number`\n - **Default**: `1 / 3`\n - **Usage**: When out of boundary, the damping behavior is performed. The smaller the damping factor, the greater the resistance. Value range: [0, 1].\n\n## specifiedIndexAsContent \n - **Type**: `number`\n - **Default**: `0`\n - **Usage**: Specify the child element corresponding to the index of the `wrapper` as the `content`. By default, BetterScroll uses the first child element of the `wrapper` as the content.\n\n ```html\n
\n
\n
1.1
\n
1.2
\n
\n
\n
2.1
\n
2.2
\n
\n
\n ```\n\n ```js\n // For the above DOM structure, when BetterScroll version <= 2.0.3, only div.content1 is used as content\n // When the version is >= 2.0.4, content can be specified through 'specifiedIndexAsContent'\n\n let bs = new BScroll('.wrapper', {\n specifiedIndexAsContent: 1 // use div.content2 as BetterScroll's content\n })\n ```\n\n## quadrant \n - **Type**: `1 | 2 | 3 | 4`\n - **Default**: `1`\n - **Usage**: When the ancestor elements of BetterScroll's wrapper DOM are forced to rotate by CSS, the original displacements in the x and y directions need to perform a certain transformation to ensure a reasonable interaction.\n\n ```html\n \n
\n
\n
\n
1.1
\n
1.2
\n
\n
\n
\n ```\n\n ```js\n let bs = new BScroll('.wrapper', {\n quadrant: 2\n })\n ```\n\n 1. When the rotation angle of the parent element or ancestor element of the `wrapper` is (315, 45], the quadrant can keep the default value;\n 2. When the rotation angle of the parent element or ancestor element of the `wrapper` is (45, 135],Especially **90 degrees**, the quadrant **must** be `2`;\n 3. When the rotation angle of the parent element or ancestor element of the `wrapper` is (135, 225],Especially **180 degrees**, the quadrant **must** be `3`;\n 4. When the rotation angle of the parent element or ancestor element of the `wrapper` is (225, 315],Especially **270 degrees**, the quadrant **must** be `4`;\n 5. When the rotation angle is special, such as 30 degrees or 200 degrees, you may not be satisfied with the built-in transformation logic. You can customize your own transformation logic through the `coordinateTransformation` hook.\n\n ```js\n let bs = new BScroll('.wrapper', {\n quadrant: 1 // default value\n })\n bs.scroller.actions.hooks.on(\n bs.scroller.actions.hooks.eventTypes.coordinateTransformation,\n (transformateDeltaData) => {\n // get user finger moved distance\n const originDeltaX = transformateDeltaData.deltaX\n const originDeltaY = transformateDeltaData.deltaY\n\n // apply transformation\n transformateDeltaData.deltaX = originDeltaY\n transformateDeltaData.deltaY = originDeltaX\n\n // transformateDeltaData.deltaX will be used as content DOM style's translateX\n // transformateDeltaData.deltaY will be used as content DOM style's translateY\n }\n )\n ```\n\n For example: Use CSS to flip the horizontal scrolling BetterScroll.\n\n \n \n <<< @/examples/vue/components/core/horizontal-rotated.vue?template\n \n \n <<< @/examples/vue/components/core/horizontal-rotated.vue?script\n \n \n <<< @/examples/vue/components/core/horizontal-rotated.vue?style\n \n \n "
},
{
"path": "packages/vuepress-docs/docs/en-US/guide/base-scroll.md",
"content": "# base-scroll\n\nIn the design of BetterScroll 2.0, we abstracted the core scrolling part, which is the smallest unit of use of BetterScroll. The compression volume is nearly one-third smaller than `1.0`. You may only need to complete a pure scrolling, then just import this library as follows:\n\n```bash\n npm install @better-scroll/core --save\n```\n\n```js\n import BScroll from '@better-scroll/core'\n const bs = new BScroll('.div')\n```\n\n## Get started\n\nBetterScroll has a variety of scroll modes.\n\n- **vertical scroll**\n\n \n \n <<< @/examples/vue/components/core/default.vue?template\n \n \n <<< @/examples/vue/components/core/default.vue?script\n \n \n <<< @/examples/vue/components/core/default.vue?style\n \n \n \n\n :::warning\n BetterScroll dispatches the scroll event in real time, which requires setting `probeType` to 3.\n :::\n\n- **Horizontal scroll**\n\n \n \n <<< @/examples/vue/components/core/horizontal.vue?template\n \n \n <<< @/examples/vue/components/core/horizontal.vue?script\n \n \n <<< @/examples/vue/components/core/horizontal.vue?style\n \n \n \n\n :::warning\n BetterScroll achieves horizontal scrolling, which is more demanding for CSS. First you need to make sure that the wrapper doesn't wrap, and the display of content is inline-block.\n\n ```stylus\n .scroll-wrapper\n // ...\n white-space nowrap\n .scroll-content\n // ...\n display inline-block\n ```\n :::\n\n- **freeScroll（Horizontal and vertical scroll simultaneously）**\n\n \n \n <<< @/examples/vue/components/core/freescroll.vue?template\n \n \n <<< @/examples/vue/components/core/freescroll.vue?script\n \n \n <<< @/examples/vue/components/core/freescroll.vue?style\n \n \n \n\n## Dynamic Content \n\nFor the `2.0.4` version, it has the ability to detect `content` becoming other elements, you can check the following example.\n\n\n \n <<< @/examples/vue/components/core/dynamic-content.vue?template\n \n \n <<< @/examples/vue/components/core/dynamic-content.vue?script\n \n \n <<< @/examples/vue/components/core/dynamic-content.vue?style\n \n \n\n\n## specifiedIndexAsContent \n\nFor the `2.0.4` version, you can specify a child of **wrapper** as **content**. In previous versions, BetterScroll would only process the first child element of the wrapper. [For details.](./base-scroll-options.html#specifiedindexascontent-2-0-4)\n\n\n \n <<< @/examples/vue/components/core/specified-content.vue?template\n \n \n <<< @/examples/vue/components/core/specified-content.vue?script\n \n \n <<< @/examples/vue/components/core/specified-content.vue?style\n \n \n\n\n## quadrant \n\nFor the `2.3.0` version, If the parent element or ancestor element of BetterScroll wrapper DOM rotates, you can use the `quadrant` option to modify the user's interactive behavior.\n\n- **Vertical becomes Horizontal**\n\n\n \n <<< @/examples/vue/components/core/vertical-rotated.vue?template\n \n \n <<< @/examples/vue/components/core/vertical-rotated.vue?script\n \n \n <<< @/examples/vue/components/core/vertical-rotated.vue?style\n \n \n\n\n- **Horizontal scroll flipped**\n\n\n \n <<< @/examples/vue/components/core/horizontal-rotated.vue?template\n \n \n <<< @/examples/vue/components/core/horizontal-rotated.vue?script\n \n \n <<< @/examples/vue/components/core/horizontal-rotated.vue?style\n \n \n\n\n## Warm Tips\n\n :::tip\n **If there is any situation where scrolling is not possible, you should first check if the height/width of the content element is greater than the height/width of the wrapper**. This is a prerequisite for content to scroll.\n\n If the content has an image, it may happen that the image has not been downloaded when the DOM element is rendered, so the height of the content element is less than expected, and the scrolling is not normal. At this point you should call the `bs.refresh` method after the image has been loaded, such as the `onload` event callback, which will recalculate the latest scrolling size.\n :::\n"
},
{
"path": "packages/vuepress-docs/docs/en-US/guide/how-to-install.md",
"content": "# Install\n\n## NPM\n\nBetterScroll is hosted on NPM and executed with the following command:\n\n```bash\nnpm install @better-scroll/core --save\n\n// or\n\nyarn add @better-scroll/core\n```\n\nThe next step is to use it in the code. [webpack](https://webpack.js.org/) and other build tools support the introduction of code from `node_modules` :\n\n``` js\nimport BScroll from '@better-scroll/core'\n```\n\nIf it is the syntax of commonjs, as follows:\n\n``` js\nvar BScroll = require('@better-scroll/scroll')\n```\n\n## Script\n\nBetterScroll also supports direct loading with script, which loads a BScroll object on the window after loading.\n\n```html\n\n\n\n\n```\n\n```js\nlet wrapper = document.getElementById(\"wrapper\")\nlet bs = new BScroll(wrapper, {})\n```\n\n## BetterScroll with all plugins\n\n```bash\nnpm install better-scroll --save\n\n// or\n\nyarn add better-scroll\n```\n\n```js\nimport BetterScroll from 'better-scroll'\nlet bs = new BetterScroll('.wrapper', {})\n```\n\nUse script.\n\n```html\n\n\n\n\n```\n\n```js\nlet bs = BetterScroll.createBScroll('.wrapper', {})\n```"
},
{
"path": "packages/vuepress-docs/docs/en-US/guide/use.md",
"content": "# How to use\n\n## Basic Usage\n\nIf you only need a list with basic scrolling capabilities, just use `core`.\n\n```js\nimport BScroll from '@better-scroll/core'\nlet bs = new BScroll('.wrapper', {\n // ...... see options\n})\n```\n\n## Plugins\n\nIf you need some extra features like `pull-up`, you need to import additional plugins, please refer to [plugins](/docs/en-US/plugins).\n\n```js\nimport BScroll from '@better-scroll/core'\nimport Pullup from '@better-scroll/pull-up'\n\n// register plugin\nBScroll.use(Pullup)\n\nlet bs = new BScroll('.wrapper', {\n probeType: 3,\n pullUpLoad: true\n})\n```\n\n## Full plugins\n\nIf you find it painsome to register plugins one by one, we offer a BetterScroll package with full plugin capabilities. It is used in exactly the same way as the `1.0` version, but the volume will be relatively large, it is recommended to load by plugin.\n\n```js\nimport BScroll from 'better-scroll'\n\nlet bs = new BScroll('.wrapper', {\n // ...\n pullUpLoad: true,\n wheel: true,\n scrollbar: true,\n // and so on\n})\n```\n"
},
{
"path": "packages/vuepress-docs/docs/en-US/plugins/README.md",
"content": "# plugins\n\n## Why need plugins\n\nIn order to decouple the functions of the various features of BetterScroll 1.x, to prevent unlimited increase in the size of the bundle. In the `2.x` architecture design, a \"plugin\" architecture design is adopted. Each feature of 1.x will be implemented in the form of Plugin in `2.x`.\n\nExisting plugins:\n- [pulldown](./pulldown.html)\n- [pullup](./pullup.html)\n- [scrollbar](./scroll-bar.html)\n- [slide](./slide.html)\n- [wheel](./wheel.html)\n- [zoom](./zoom.html)\n- [mouse-wheel](./mouse-wheel.html)\n- [observe-dom](./observe-dom.html)\n- [observe-image](./observe-image.html)\n- [nested-scroll](./nested-scroll.html)\n- [infinity](./infinity.html)\n- [movable](./movable.html)\n- [indicators](./indicators.html)\n\nYou can write a plugin by yourself to add new feature to `bs`. If you want do this, please refer to [How to write a plugin](./how-to-write.html).\n\n## Use a plugin\n\nUse plugins by calling the `BScroll.use()` static method. This has to be done before you call `new BScroll()`:\n\n```js\n import BScroll from '@better-scroll/core'\n import Plugin from 'somewhere'\n\n new BScroll('.wrapper', {\n // pluginKey corresponds to the value of the static attribute pluginName on the Plugin class,\n // otherwise the plugin cannot be instantiated\n pluginKey: {}\n })\n```\n\n## Use a method or property of plugins\n\nThe plugin may expose some methods or properties. These methods or properties are proxied to `bs` via `Object.defineProperty` method. For example, the `zoomTo` method is provided in the zoom plugin, which you can use by `bs.zoomTo`.\n\n```js\n import BScroll from '@better-scroll/core'\n import Zoom from '@better-scroll/zoom'\n\n BScroll.use(Zoom)\n\n const bs = new BScroll('#scroll-wrapper', {\n freeScroll: true,\n scrollX: true,\n scrollY: true,\n disableMouse: true,\n useTransition: true,\n zoom: {\n start: 1,\n min: 0.5,\n max: 2\n }\n })\n\n bs.zoomTo(1.5, 0, 0) // zoomTo from Zoom Plugin is proxied to bs instance\n```\n\n## Use a event of plugins\n\nThe hooks exposed in the plugin will be delegated to `bs`. For example, you can listen to the `zoomStart` event, which is exposed in zoom plugin, in the following way:\n\n```js\n import BScroll from '@better-scroll/core'\n import Zoom from '@better-scroll/zoom'\n\n BScroll.use(Zoom)\n const bs = new BScroll('#scroll-wrapper', {\n freeScroll: true,\n scrollX: true,\n scrollY: true,\n zoom: {\n start: 1,\n min: 0.5,\n max: 2\n }\n })\n\n bs.on('zoomStart', () => {\n\n })\n```\n\n## BetterScroll with all plugins\n\nConsidering the trouble of registering plugins one by one, if your project uses the full plugins of BetterScroll, we offer a once-in-a-lifetime solution.\n\n\n```js\n import BScroll from 'better-scroll'\n\n const bs = new BScroll('#scroll-wrapper', {\n pullUpLoad: true,\n pullDownRefresh: true,\n scrollbar: true,\n // and so on\n })\n```\n\n::: warning\nimport all of BetterScroll may have a big impact on the size of your bundle, and as the function of BetterScroll expands, the size will increase unlimitedly, **try to import what you need**.\n:::\n\n::: warning\nNormally, you should pay attention to the properties and methods exposed by the BetterScroll instance, because the properties and methods on the plugin instance have been proxied to the bs. If you really need to care about the plugin instance, you can also use `bs.plugins ` to get all plugin information.\n\n```js\n import BScroll from '@better-scroll/scroll'\n import zoom from '@better-scroll/zoom'\n\n BScroll.use(zoom)\n\n const bs = new BScroll('.wrapper', {\n zoom: true\n })\n\n console.log(bs.plugins.zoom)\n```\n:::"
},
{
"path": "packages/vuepress-docs/docs/en-US/plugins/how-to-write.md",
"content": "# How to write plugins\n\n### Conceive The Function Of The Plugin\n\n```js\n import BScroll from '@better-scroll/core'\n import MyPlugin from '@better-scroll/my-plugin'\n\n BScroll.use(MyPlugin)\n\n const bs = new BScroll('.wrapper', {\n myPlugin: {\n scrollText: 'I am scrolling',\n scrollEndText: 'Scroll has ended'\n },\n // or\n myPlugin: true\n })\n\n // Use the event that is proxied to bs by plugin\n bs.on('printScrollEndText', (scrollEndText) => {\n console.log(scrollEndText) // print \"Scroll has ended, position is (xx, yy)\"\n })\n\n // Use the method that is proxied to bs by plugin\n bs.printScrollText() // print \"I am scrolling\"\n```\n\n### Write Plugin\n\n1. **TypeScript declare merging and expose plugin methods**\n\n```typescript\nimport BScroll from '@better-scroll/core'\n\nexport type MyPluginOptions = Partial | true\n\ntype MyPluginConfig = {\n scrollText: string,\n scrollEndText: string\n}\n\ninterface PluginAPI {\n printScrollText(): void\n}\n\ndeclare module '@better-scroll/core' {\n interface CustomOptions {\n myPlugin?: myPluginOptions\n }\n\n interface CustomAPI {\n myPlugin: PluginAPI\n }\n}\n```\n\nThe advantage of this is that when the `myPlugin` plugin is imported and BetterScroll is instantiated, there can be corresponding Options prompts and bs can have corresponding method prompts. Take the pulldown plugin as an example:\n\n\n\n\n\n\n2. **Write the plugin logic**\n\n - **BetterScroll plugins need to be a class, and have the following characteristics:**\n\n - The static pluginName property.\n - Implement the PluginAPI interface (only if it is necessary to proxy the plugin method to bs).\n - The first argument of the constructor is the BetterScroll instance `bs`. You can inject your own logic through the **event** or **hook** of bs.\n\n ```typescript\n export default class MyPlugin implements PluginAPI {\n static pluginName = 'myPlugin'\n public options: MyPluginConfig\n constructor(public scroll: BScroll){\n this.handleOptions()\n\n this.handleBScroll()\n\n this.registerHooks()\n }\n }\n ```\n\n - **handleOptions**\n\n Merge user options，narrow down it‘s type。\n\n ```typescript\n import { extend } from '@better-scroll/shared-utils'\n export default class MyPlugin {\n private handleOptions() {\n const userOptions = (this.scroll.options.myPlugin === true\n ? {}\n : this.scroll.options.myPlugin) as Partial\n const defaultOptions: MyPluginConfig = {\n scrollText: 'I am scrolling',\n scrollEndText: 'Scroll has ended'\n }\n this.options = extend(defaultOptions, userOptions)\n }\n }\n ```\n\n - **handleBScroll**\n\n Proxy events and methods to the BetterScroll instance.\n\n ```typescript\n export default class MyPlugin implements PluginAPI {\n private handleBScroll() {\n const propertiesConfig = [\n {\n key: 'printScrollText',\n sourceKey: 'plugins.myPluginOptions.printScrollText'\n }\n ]\n // myPlugin.printScrollText is proxied to bs.printScrollText\n this.scroll.proxy(propertiesConfig)\n // Proxy printScrollEndText event to bs\n // Users can subscribe to events via bs.on('printScrollEndText', handler)\n this.scroll.registerType(['printScrollEndText'])\n }\n\n printScrollText() {\n console.log(this.options.scrollText)\n }\n }\n ```\n\n - **registerHooks**\n\n Tap into the bs hook, implement the logic of the plugin, and dispatch custom events of the plugin.\n\n ```typescript\n export default class MyPlugin implements PluginAPI {\n private registerHooks() {\n const scroll = this.scroll\n scroll.on(scroll.eventTypes.scrollEnd, ({ x, y }) => {\n scroll.trigger(\n scroll.eventTypes.printScrollEndText,\n `${this.options.scrollEndText}, position is (${x}, ${y})`\n )\n })\n }\n }\n ```\n\nCongratulations, a simple BetterScroll plugin has been completed. If you need more complex plugin to meet your need, you can read [Events and Hooks](../guide/base-scroll-api.html#events-vs-hooks), it can help you to complete a fantastic plugin."
},
{
"path": "packages/vuepress-docs/docs/en-US/plugins/indicators.md",
"content": "# indicators \n\n## Introduciton\n\nThe indicators provides the ability to link with another BetterScroll. With this, you can achieve effects such as **Parallax Scrolling**, **Magnifier**.\n\n::: tip\nThis is a very powerful and creative plugin.\n:::\n\n## Install\n\n```bash\nnpm install @better-scroll/indicators --save\n\n// or\n\nyarn add @better-scroll/indicators\n```\n\n## Usage\n\nFirst, install the plugin via the static method `BScroll.use()`\n\n```js\nimport BScroll from '@better-scroll/core'\nimport Indicators from '@better-scroll/indicators'\n\nBScroll.use(Indicators)\n```\n\npass correct [indicators options](./indicators.html#indicators-options).\n\n```js\nnew BScroll('.wrapper', {\n indicators: {\n // For details, please refer to the demo below\n relationElement: someHTMLElement\n }\n})\n```\n## Demos\n\n - **Magnifier**\n\n \n \n <<< @/examples/vue/components/indicators/minimap.vue?template\n \n \n <<< @/examples/vue/components/indicators/minimap.vue?script\n \n \n <<< @/examples/vue/components/indicators/minimap.vue?style\n \n \n \n\n - **Parallax Scrolling**\n\n \n \n <<< @/examples/vue/components/indicators/parallax-scroll.vue?template\n \n \n <<< @/examples/vue/components/indicators/parallax-scroll.vue?script\n \n \n <<< @/examples/vue/components/indicators/parallax-scroll.vue?style\n \n \n \n\n## indicators options\n\n### relationElement\n\n - **Type**: `HTMLElement`\n\n The container element associated with another BetterScroll, just like the above demo, `div.scroll-indicator` is releationElement. **releationElement must be passed in by the user and has child elements**.\n\n### relationElementHandleElementIndex\n\n - **Type**: `number`\n - **Default**: `0`\n\n Specify the child element of releationElement as the manipulated element. For details, please refer to the above demo.\n\n### ratio\n\n - **Type**: `number | Ratio | undefined`\n - **Default**: `undefined`\n\n ```ts\n type Ratio = {\n // Specify the ratio of the scroll distance of x\n x: number\n // Specify the ratio of the scroll distance of y\n y: number\n }\n ```\n Specify the ratio of releationElement to the scrolling distance of BetterScroll. Usually,**the plugin will automatically** calculate the scroll ratio of the two, but you can also manually specify the ratio to achieve the effect of `Parallax Scrolling`. For details, please refer to the demo above.\n\n### interactive\n\n - **Type**: `boolean | undefined`\n - **Default**: `undefined`\n\n Decide whether the relationElementHandleElementIndex of relationElement can interact. When it is set to `false`, it will not respond to touch / mouse events."
},
{
"path": "packages/vuepress-docs/docs/en-US/plugins/infinity.md",
"content": "# infinity\n\nThe infinity plugin provides BetterScroll with unlimited scrolling capabilities. If you have a large amount of list data to render, you can use the infinity plugin, in which BetterScroll will only render a certain number of DOM elements, so that the page will continue to scroll smoothly when a large amount of data.\n\n> Note: Unless you have a lot of data rendering needs, use coreScroll.\n\n## Install\n\n```shell\nnpm install @better-scroll/infinity --save\n\n// or\n\nyarn add @better-scroll/infinity\n```\n\n## Usage\n\nFirst, install the plugin via the static method `BScroll.use()`\n\n```js\nimport BScroll from '@better-scroll/core'\nimport InfinityScroll from '@better-scroll/infinity'\n\nBScroll.use(InfinityScroll)\n```\n\nThen, To instantiate BetterScroll, you need to pass the related configuration item `infinity`:\n\n```typescript\nnew BScroll('.bs-wrapper', {\n scrollY: true,\n infinity: {\n fetch(count) {\n // Fetch data that is larger than count, the function is asynchronous, and it needs to return a Promise.。\n // After you have successfully fetch the data, you need resolve an array of data (or resolve Promise).\n // Each element of the array is list data, which will be rendered when the render method executes。\n // If there is no data, you can resolve (false) to tell the infinite scroll list that there is no more data。\n }\n render(item, div?: HTMLElement) {\n // Rendering each element node, item is data from fetch function\n // div is an element which is recycled from document or undefined\n // The function needs to return to a html element.\n },\n createTombstone() {\n // Must return a tombstone DOM node.\n }\n }\n})\n```\n\n::: danger Note\n`fetch`, `render`, `createTombstone` must be implemented in accordance with the comments as above, otherwise an internal error will be reported.\n\nThe plugin relies on Promise internally. If the browser does not support it, the Promise Polyfill is required.\n:::\n\n## Demo\n\n\n \n <<< @/examples/vue/components/infinity/default.vue?template\n \n \n <<< @/examples/vue/components/infinity/default.vue?script\n \n \n <<< @/examples/vue/components/infinity/default.vue?style\n \n \n"
},
{
"path": "packages/vuepress-docs/docs/en-US/plugins/mouse-wheel.md",
"content": "# mouse-wheel\n\nmouseWheel extends the capabilities of the BetterScroll mouse wheel.\n\n## Install\n\n```bash\nnpm install @better-scroll/mouse-wheel --save\n\n// or\n\nyarn add @better-scroll/mouse-wheel\n```\n\n::: tip\nCurrently supports mouse wheel: core, slide, wheel, pullup, pulldown plugins.\n:::\n\n## Basic Usage\n\nIn order to enable the mouseWheel plugin, you need to first import it, register the plugin through the static method `BScroll.use()`, and finally pass in the correct [mouseWheel option](./mouse-wheel.html#mousewheel-options)\n\n```js\n import BScroll from '@better-scroll/core'\n import MouseWheel from '@better-scroll/mouse-wheel'\n BScroll.use(MouseWheel)\n\n new BScroll('.bs-wrapper', {\n //...\n mouseWheel: {\n speed: 20,\n invert: false,\n easeTime: 300\n }\n })\n```\n\n - **VerticalScroll Demo**\n\n \n \n <<< @/examples/vue/components/mouse-wheel/vertical-scroll.vue?template\n \n \n <<< @/examples/vue/components/mouse-wheel/vertical-scroll.vue?script\n \n \n <<< @/examples/vue/components/mouse-wheel/vertical-scroll.vue?style\n \n \n \n\n- **HorizontalScroll Demo**\n\n \n \n <<< @/examples/vue/components/mouse-wheel/horizontal-scroll.vue?template\n \n \n <<< @/examples/vue/components/mouse-wheel/horizontal-scroll.vue?script\n \n \n <<< @/examples/vue/components/mouse-wheel/horizontal-scroll.vue?style\n \n \n \n\n\n## Advanced Usage\n\nThe mouseWheel plugin can also be used with other plugins to increase the operation of the mouse wheel.\n\n- **mouseWheel & slide**\n\n Operate [slide](./slide.html) with the mouse wheel.\n\n - **HorizontalSlide Demo**\n\n \n \n <<< @/examples/vue/components/mouse-wheel/horizontal-slide.vue?template\n \n \n <<< @/examples/vue/components/mouse-wheel/horizontal-slide.vue?script\n \n \n <<< @/examples/vue/components/mouse-wheel/horizontal-slide.vue?style\n \n \n \n\n - **VerticalSlide Demo**\n\n \n \n <<< @/examples/vue/components/mouse-wheel/vertical-slide.vue?template\n \n \n <<< @/examples/vue/components/mouse-wheel/vertical-slide.vue?script\n \n \n <<< @/examples/vue/components/mouse-wheel/vertical-slide.vue?style\n \n \n \n\n- **mouseWheel & pullup**\n\n use mousewheel do [pullup](./pullup.html) operation.\n\n \n \n <<< @/examples/vue/components/mouse-wheel/pullup.vue?template\n \n \n <<< @/examples/vue/components/mouse-wheel/pullup.vue?script\n \n \n <<< @/examples/vue/components/mouse-wheel/pullup.vue?style\n \n \n \n\n- **mouseWheel & pulldown**\n\n use mousewheel do [pulldown](./pulldown.html) operation.\n\n \n \n <<< @/examples/vue/components/mouse-wheel/pulldown.vue?template\n \n \n <<< @/examples/vue/components/mouse-wheel/pulldown.vue?script\n \n \n <<< @/examples/vue/components/mouse-wheel/pulldown.vue?style\n \n \n \n\n- **mouseWheel & wheel**\n\n use mousewheel do [wheel](./wheel.html) operation.\n\n \n \n <<< @/examples/vue/components/mouse-wheel/picker.vue?template\n \n \n <<< @/examples/vue/components/mouse-wheel/picker.vue?script\n \n \n <<< @/examples/vue/components/mouse-wheel/picker.vue?style\n \n \n \n\n## mouseWheel options\n\n### speed\n\n - **Type**: `number`\n - **Default**: `20`\n\n The speed at which the mouse wheel scrolls.\n\n### invert\n\n - **Type**: `boolean`\n - **Default**: `false`\n\n When the value is true, it means that the scrolling direction of the wheel is opposite to that of BetterScroll.\n\n### easeTime\n\n - **Type**: `number`\n - **Default**: `300`(ms)\n\n The duration of the scroll animation.\n\n### discreteTime\n\n - **Type**: `number`\n - **Default**: `400`(ms)\n\n Because the mouse wheel is a discrete movement, there is no event type of **start**, **move**, **end**, so as long as no scroll is detected within `discreteTime`, then one scroll wheel action ends.\n\n ::: warning\n When integrated with [pulldown](./pulldown.html) plugin, `easeTime` and `discreteTime` will be **internally** modified to **reasonable fixed value** to trigger the `pullingDown` hook\n :::\n\n### throttleTime\n\n - **Type**: `number`\n - **Default**: `0`(ms)\n\n Since the scroll wheel is a high-frequency action, the trigger frequency can be limited by `throttleTime`. MouseWheel will cache the scrolling distance, and calculate the cached distance and scroll every throttleTime.\n\n > Modifying throttleTime may cause discontinuous scrolling animation, please adjust it according to the actual scene.\n\n### dampingFactor\n\n - **Type**: `number`\n - **Default**: `0.1`\n\n Damping factor, the value range is [0, 1]. When BetterScroll rolls out of the boundary, resistance needs to be applied to prevent the rolling range from being too large. The smaller the value, the greater the resistance.\n\n:::tip\nWhen `mouseWheel` is configured as `true`, the plugin uses the default plugin option.\n\n```js\nconst bs = new BScroll('.wrapper', {\n mouseWheel: true\n})\n\n// equals\n\nconst bs = new BScroll('.wrapper', {\n mouseWheel: {\n speed: 20,\n invert: false,\n easeTime: 300,\n discreteTime: 400,\n throttleTime: 0,\n dampingFactor: 0.1\n }\n})\n```\n:::\n\n## Events\n\n### alterOptions\n - **Arguments**: `MouseWheelConfig`\n ```typescript\n export interface MouseWheelConfig {\n speed: number\n invert: boolean\n easeTime: number\n discreteTime: number\n throttleTime: number,\n dampingFactor: number\n }\n ```\n - **Triggered Timing**: The mousewheel begins to scroll, allowing to modify options to control certain behaviors during scrolling.\n\n### mousewheelStart\n - **Arguments**: none\n - **Triggered Timing**: The mousewheel starts.\n\n### mousewheelMove\n - **Arguments**: `{ x, y }`\n - `{ number } x`: The current x of BetterScroll\n - `{ number } y`: The current y of BetterScroll\n - **Type**: `{ x: number, y: number }`\n - **Triggered Timing**: Mousewheel is scrolling\n\n### mousewheelEnd\n - **Arguments**:`delta`\n - **Type**: `WheelDelta`\n ```typescript\n interface WheelDelta {\n x: number\n y: number\n directionX: Direction\n directionY: Direction\n }\n ```\n - **Triggered Timing**: If the mousewheel hook has not been triggered after `discreteTime`, a mousewheel action will be settled.\n\n ::: danger Note\n Due to the particularity of the mousewheel hook, the dispatch of mousewheelEnd does not mean the end of the scroll animation.\n :::\n\n::: tip\nIn most scenarios, if you want to know the current scroll position of BetterScroll accurately, please listen to the scroll and scrollEnd hooks instead of the `mouseXXX` hooks.\n:::"
},
{
"path": "packages/vuepress-docs/docs/en-US/plugins/movable.md",
"content": "# movable\n\n## Introduction\n\nAdd move functionality for BetterScroll.\n\n## Install\n\n```bash\nnpm install @better-scroll/movable --save\n\n// or\n\nyarn add @better-scroll/movable\n```\n\n## Basic Usage\n\nimport `movable`, then call `BScroll.use()`.\n\n```js\n import BScroll from '@better-scroll/core'\n import Movable from '@better-scroll/movable'\n\n BScroll.use(Movable)\n```\n\npass in the correct configuration in options, for example:\n\n```js\n new BScroll('.bs-wrapper', {\n bindToTarget: true,\n scrollX: true,\n scrollY: true,\n freeScroll: true,\n bounce: true\n movable: true // for movable plugin\n })\n```\n\nThe following is related to `movable` plugin and [BetterScroll configuration](../guide/base-scroll-options.html):\n\n- **movable(for plugin)**\n\n Enable zoom functionality, set it `true`.\n\n- **bindToTarget**\n\n Must be set to `true` to actively bind the touch event to **the element to be moved**, because BetterScroll binds the touch event to **the wrapper element** by default.\n\n- **freeScroll**\n\n Record the offset of x and y direction when finger moved, set it `true`. In addtional, **scrollX** and **scrollY** are also need to be true.\n\n- **scrollX**\n\n Enable the scrolling ability in the x direction and set it to `true`.\n\n- **scrollY**\n\n Enable the scrolling ability in the y direction and set it to `true`.\n\n- **bounce**\n\n Specifies to turn on boundary rebound.\n\n - **Examples**\n\n ```js\n {\n bounce: true // Enable all directions,\n bounce: {\n left: true, // Enable the left\n right: true, // Enable the right\n top: false,\n bottom: false\n }\n }\n ```\n## Demo\n\n - **Only one content**\n\n Usually, there is only one content.\n\n \n \n <<< @/examples/vue/components/movable/default.vue?template\n \n \n <<< @/examples/vue/components/movable/default.vue?script\n \n \n <<< @/examples/vue/components/movable/default.vue?style\n \n \n \n\n - **Multi content**\n\n However, in some scenarios, there may be multiple content.\n\n \n \n <<< @/examples/vue/components/movable/multi-content.vue?template\n \n \n <<< @/examples/vue/components/movable/multi-content.vue?script\n \n \n <<< @/examples/vue/components/movable/multi-content.vue?style\n \n \n \n\n## Advanced Usage\n\nWith [ zoom ](./zoom.html#introduction) plugin, increase the zoom capability.\n\n```js\n import BScroll from '@better-scroll/core'\n import Movable from '@better-scroll/movable'\n import Zoom from '@better-scroll/zoom'\n new BScroll('.bs-wrapper', {\n bindToTarget: true,\n scrollX: true,\n scrollY: true,\n freeScroll: true,\n bounce: true\n movable: true // for movable plugin\n zoom: { // for zoom plugin\n start: 1,\n min: 1,\n max: 3\n }\n })\n```\n\n## Demo\n\n :::warning\n pc is not allowed, scan the qrcode.\n :::\n\n - **One Content**\n\n \n \n <<< @/examples/vue/components/movable/scale.vue?template\n \n \n <<< @/examples/vue/components/movable/scale.vue?script\n \n \n <<< @/examples/vue/components/movable/scale.vue?style\n \n \n \n\n - **Multi Content**\n\n \n \n <<< @/examples/vue/components/movable/multi-content-scale.vue?template\n \n \n <<< @/examples/vue/components/movable/multi-content-scale.vue?script\n \n \n <<< @/examples/vue/components/movable/multi-content-scale.vue?style\n \n \n \n\n## Instance Methods\n\n### putAt(x, y, [time], [easing]) \n - **Arguments**\n - `{PositionX} x`: x coordinate\n - `PositionX: 'number | 'left' | 'right' | 'center'`\n - `{PositionY} y`: y coordinate\n - `PositionY: 'number | 'top' | 'bottom' | 'center'`\n - `{number} [time]`: Scroll animation duration\n - `{EaseItem} [easing]`: Ease effect configuration, refer to [ease.ts](https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/shared-utils/src/ease.ts), the default is `bounce` effect\n\n Put the content element in a certain position. x and y can be not only numbers, but also corresponding strings.\n\n - **Examples**\n\n ```js\n const bs = new BScroll('.bs-wrapper', {\n bindToTarget: true,\n scrollX: true,\n scrollY: true,\n freeScroll: true,\n movable: true\n })\n\n // Placed in the center of the wrapper\n bs.putAt('center', 'center', 0)\n\n // Placed in the right-bottom corner of the wrapper, the animation duration is 1s\n bs.putAt('right', 'bottom', 1000)\n ```"
},
{
"path": "packages/vuepress-docs/docs/en-US/plugins/nested-scroll.md",
"content": "# nested-scroll\n\n## Introduction\n\nCoordinates nested BetterScroll scrolling behavior.\n\n::: warning\n**v2.1.0** supports BetterScroll with **Multi Nesting**, with more powerful functions and better performance. Only **Double Nesting** is supported in old version, please upgrade to **v2.1.0** as soon as possible.\n:::\n\n::: tip\n**v2.1.0** Perfectly solves the problem that the click event of multi-level nested BetterScroll is dispatched multiple times.\n:::\n\n## Install\n\n```bash\nnpm install @better-scroll/nested-scroll --save\n\n// or\n\nyarn add @better-scroll/nested-scroll\n```\n\n## Usage\n\nimport the `nested-scroll` plugin and use it with the static method `BScroll.use()`\n\n```js\n import BScroll from '@better-scroll/core'\n import NestedScroll from '@better-scroll/nested-scroll'\n\n BScroll.use(NestedScroll)\n```\n\nAfter the above steps are completed, `nestedScroll` is configured in BScroll's `options`.\n\n```js\n // < v2.1.0\n // parent bs\n new BScroll('.outerWrapper', {\n nestedScroll: true\n })\n // child bs\n new BScroll('.innerWrapper', {\n nestedScroll: true\n })\n\n // >= v2.1.0\n // parent bs\n new BScroll('.outerWrapper', {\n nestedScroll: {\n groupId: 'dummy-divide' // string or number\n }\n })\n // child bs\n new BScroll('.innerWrapper', {\n nestedScroll: {\n groupId: 'dummy-divide'\n }\n })\n```\n\nBetterScroll instances (bs) with the same `groupId` **share the same NestedScroll instance**(`ns`), `ns` will coordinate the scrolling behavior of each bs, once a bs is destroyed, `ns` will lose control of it, for example:\n\n```js\n// parent bs\nconst bs1 = new BScroll('.outerWrapper', {\n nestedScroll: {\n groupId: 'shared' // string or number\n }\n})\n// child bs\nconst bs2 = new BScroll('.innerWrapper', {\n nestedScroll: {\n groupId: 'shared'\n }\n})\n\nconsole.log(bs1.plugins.nestedScroll === bs2.plugins.nestedScroll) // true\n\n// nestedScroll no longer constrains bs2\n// nestedScroll no longer coordinates the scrolling behavior of bs1 and bs2\nbs2.destroy()\n```\n\n## Demo\n\n- **Nested vertical scroll **\n\n \n \n <<< @/examples/vue/components/nested-scroll/vertical.vue?template\n \n \n <<< @/examples/vue/components/nested-scroll/vertical.vue?script\n \n \n <<< @/examples/vue/components/nested-scroll/vertical.vue?style\n \n \n \n\n- **Nested triple vertical scroll **\n\n \n \n <<< @/examples/vue/components/nested-scroll/triple-vertical.vue?template\n \n \n <<< @/examples/vue/components/nested-scroll/triple-vertical.vue?script\n \n \n <<< @/examples/vue/components/nested-scroll/triple-vertical.vue?style\n \n \n \n\n- **Nested horizontal scroll **\n\n \n \n <<< @/examples/vue/components/nested-scroll/horizontal.vue?template\n \n \n <<< @/examples/vue/components/nested-scroll/horizontal.vue?script\n \n \n <<< @/examples/vue/components/nested-scroll/horizontal.vue?style\n \n \n \n\n## Instance Methods \n\n:::tip\nAll methods are proxied to BetterScroll instance, for example:\n\n```js\nimport BScroll from '@better-scroll/core'\nimport NestedScroll from '@better-scroll/nested-scroll'\n\nBScroll.use(NestedScroll)\n\nconst bs1 = new BScroll('.parent-wrapper', {\n nestedScroll: {\n groupId: 'dummy'\n }\n})\n\nconst bs2 = new BScroll('.child-wrapper', {\n nestedScroll: {\n groupId: 'dummy'\n }\n})\n\n// purge nestedScroll\n// bs1 and bs2 share the same nestedScroll instance because they have the same groupId\nbs1.purgeNestedScroll() // Same as bs2.purgeNestedScroll()\n```\n:::\n\n### `purgeNestedScroll()`\n\n - **Details**: Purge the nestedScroll that controls itself\n\n ::: warning\n Different `groupId` will generate different nestedScroll, and the same `groupId` will share the same nestedScroll, so you should call `purgeNestedScroll` at the right time (such as when the component is destroyed) to clean up the memory. Or you can call the destroy method of BetterScroll to remove itself from nestedScroll, for example:\n\n ```js\n const bs1 = new BScroll('.parent-wrapper', {\n nestedScroll: {\n groupId: 'dummy'\n }\n })\n\n const bs2 = new BScroll('.child-wrapper', {\n nestedScroll: {\n groupId: 'dummy'\n }\n })\n\n bs1.destroy() // nestedScroll no longer constrains bs1\n bs2.destroy() // nestedScroll no longer constrains bs2\n ```\n :::\n\n## Static Methods \n\n### `getAllNestedScrolls()`\n\n - **Details**: Get all current nestedScroll instances\n\n - **Returns**: An array of nestedScroll instances\n\n ```typescript\n import NestedScroll from '@better-scroll/nested-scroll'\n\n const nestedScrolls: NestedScroll[] = NestedScroll.getAllNestedScrolls()\n ```\n\n### `purgeAllNestedScrolls()`\n\n - **Details**: Purge all current nestedScroll instances\n\n ```typescript\n import NestedScroll from '@better-scroll/nested-scroll'\n\n // No longer constrain any BetterScroll instances\n NestedScroll.purgeAllNestedScrolls()\n ```"
},
{
"path": "packages/vuepress-docs/docs/en-US/plugins/observe-dom.md",
"content": "# observe-dom\nEnable detection of content and content child DOM changes. When the plugin is used and these DOM elements change, `bs.refresh()` will be triggered. The observe-dom plugin has the following features:\n\n- Debounce feature for CSS attributions which change frequently\n- If the scroll elements change occurs during the scroll animation, refresh will not be triggered.\n\n## Install\n\n```bash\nnpm install @better-scroll/observe-dom --save\n\n// or\n\nyarn add @better-scroll/observe-dom\n```\n\n## Usage\n\n ```js\n import BScroll from '@better-scroll/core'\n import ObserveDOM from '@better-scroll/observe-dom'\n BScroll.use(ObserveDOM)\n\n new BScroll('.bs-wrapper', {\n //...\n observeDOM: true // init observe-dom plugin\n })\n ```\n\n## Demo\n\n \n \n <<< @/examples/vue/components/observe-dom/default.vue?template\n \n \n <<< @/examples/vue/components/observe-dom/default.vue?script\n \n \n <<< @/examples/vue/components/observe-dom/default.vue?style\n \n \n \n\n:::warning\nFor version <= `2.0.6`, because the internal implementation of the plugin uses [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver), it cannot detect whether the load of the `img` Element is complete, so for images with uncertain heights inside the content, you need to wait for the image to load before calling `bs.refresh()` to recalculate the scrollable size. If the browser does not support MutationObserver, the fallback inside the plugin is to recalculate the scrollable size every second.\n:::\n\n:::tip\nIn the v2.1.0 version, the [observe-image](./observe-image) plugin is added to detect the loading of the img tag, so the two can be combined to complement the **autorefresh** ability to update BetterScroll every time.\n:::"
},
{
"path": "packages/vuepress-docs/docs/en-US/plugins/observe-image.md",
"content": "# observe-image \n\n## Introduction\n\nTurn on the detection of the loading of image elements in the wrapper child element. Regardless of whether the image is loaded successfully or not, BetterScroll's `refresh` method is automatically called to recalculate the scrollable width or height, which was supported in v2.1.0.\n\n:::tip\nFor scenes where CSS has been used to determine the width and height of the image, this plugin should not be used, because each call to refresh will affect performance. You only need it if the width or height of the image is uncertain.\n:::\n\n## Install\n\n```bash\nnpm install @better-scroll/observe-image --save\n\n// or\n\nyarn add @better-scroll/observe-image\n```\n\n## Usage\n\n```js\n import BScroll from '@better-scroll/core'\n import ObserveImage from '@better-scroll/observe-image'\n BScroll.use(ObserveImage)\n\n new BScroll('.bs-wrapper', {\n //...\n observeImage: true\n })\n```\n\n## Demo\n\n \n \n <<< @/examples/vue/components/observe-image/default.vue?template\n \n \n <<< @/examples/vue/components/observe-image/default.vue?script\n \n \n <<< @/examples/vue/components/observe-image/default.vue?style\n \n \n \n\n## observeImage Options\n\n:::tip\nWhen `observeImage` is configured as `true`, the plugin uses the default plugin option.\n\n```js\nconst bs = new BScroll('.wrapper', {\n observeImage: true\n})\n\n// equals\n\nconst bs = new BScroll('.wrapper', {\n observeImage: {\n debounceTime: 100 // ms\n }\n})\n```\n:::\n\n### debounceTime\n\n - **Type**: `number`\n - **Default**: `100`\n\n After detecting the success or failure of the image loading, the refresh method will be called after **debounceTime** milliseconds to recalculate the scrollable height or width. If multiple images load successfully or fail within debounceTime milliseconds, the **refresh** method will only be called once.\n\n :::tip\n When **debounceTime** is 0, the **refresh** method will be called immediately instead of using **setTimeout**.\n :::"
},
{
"path": "packages/vuepress-docs/docs/en-US/plugins/pulldown.md",
"content": "# pulldown\n\n## Introduction\n\nThe pulldown plugin provides BetterScroll with the ability to monitor pulldown operation.\n\n## Install\n\n```bash\nnpm install @better-scroll/pull-down --save\n\n// or\n\nyarn add @better-scroll/pull-down\n```\n\n## Usage\n\nFirst, install the plugin via the static method `BScroll.use()`\n\n```js\nimport BScroll from '@better-scroll/core'\nimport PullDown from '@better-scroll/pull-down'\n\nBScroll.use(PullDown)\n```\n\npass in the correct configuration in [options](./pulldown.html#pulldownrefresh-options), for example:\n\n```js\nnew BScroll('.bs-wrapper', {\n pullDownRefresh: true\n})\n```\n\n## Demo\n\n- **Basic Usage**\n\n\n \n <<< @/examples/vue/components/pulldown/default.vue?template\n \n \n <<< @/examples/vue/components/pulldown/default.vue?script\n \n \n <<< @/examples/vue/components/pulldown/default.vue?style\n \n \n\n\n- **Sina-Weibo **\n\n\n \n <<< @/examples/vue/components/pulldown/sina-weibo.vue?template\n \n \n <<< @/examples/vue/components/pulldown/sina-weibo.vue?script\n \n \n <<< @/examples/vue/components/pulldown/sina-weibo.vue?style\n \n \n\n\nIn order to match the effects of App, in version v2.4.0, pulldown has made some changes and is compatible with previous versions. During a pulldown procedure, there are three internal circulation states, and the states are irreversible. They are as follows:\n\n1. **default**\n\n The initial state.\n\n2. **moving**\n\n Moving state, this state represents that the user's finger is manipulating BetterScroll, and the finger is keeping in touch. In this state, BetterScroll will dispatch two events.\n\n - **enterThreshold**\n\n Dispatched when BetterScroll scrolls **into** the pulldown threshold area. Inside this event, you can do the logic of texts initialization, such as prompting the user to \"pull down to refresh\"\n \n - **leaveThreshold**\n\n Dispatched when BetterScroll scrolls **out of** the pulldown threshold area. You can prompt the user to \"Release finger\"\n\n3. **fetching**\n\n Once the finger went away, the pullingDown event is triggered to execute the logic of fetching data\n\nThe state change can only be `default -> moving -> fetching` or `default -> moving`. The latter means that at the moment the user's finger is released, the conditions for triggering the pullingDown event are not met.\n\n## pullDownRefresh Options\n\n### threshold\n\n - **Type**: `number`\n - **Default**: `90`\n\n Configure the top pull-down distance to determine dispatching `pullingDown` hooks.\n\n### stop\n\n - **Type**: `number`\n - **Default**: `40`\n\n Rebound distance. After BetterScroll dispatches the `pullingDown` hook, it will immediately execute the rebound animation.\n\n:::tip\nWhen `pullDownRefresh` is configured as `true`, the plugin uses the default plugin option.\n\n```js\nconst bs = new BScroll('.wrapper', {\n pullDownRefresh: true\n})\n\n// equals\n\nconst bs = new BScroll('.wrapper', {\n pullDownRefresh: {\n threshold: 90,\n stop: 40\n }\n})\n```\n:::\n\n## Instance Methods\n\n:::tip\nAll methods are proxied to BetterScroll instance, for example:\n\n```js\nimport BScroll from '@better-scroll/core'\nimport PullDown from '@better-scroll/pull-down'\n\nBScroll.use(PullDown)\n\nconst bs = new BScroll('.bs-wrapper', {\n pullDownRefresh: true\n})\n\nbs.finishPullDown()\nbs.openPullDown({})\nbs.autoPullDownRefresh()\n```\n:::\n\n### `finishPullDown()`\n\n - **Details**: End the pull-down refresh behavior.\n\n ::: warning\n Every time the `pullingDown` hook is triggered, you should **actively call** `finishPullDown()` to tell BetterScroll to be ready for the next pullingDown hook.\n :::\n\n### `openPullDown(config: PullDownRefreshOptions = {})`\n\n - **Details**: Turn on the pull-down refresh dynamically.\n - **Arguments**:\n - `{ PullDownRefreshOptions } config`: Modify the option of the pulldown plugin\n - `PullDownRefreshOptions`:\n\n ```typescript\n export type PullDownRefreshOptions = Partial | true\n\n export interface PullDownRefreshConfig {\n threshold: number\n stop: number\n }\n ```\n\n ::: warning\n The **openPullDown** method should be used with **closePullDown**, because in the process of generating the pulldown plugin, the pull-down refresh action has been automatically monitored.\n :::\n\n### `closePullDown()`\n\n - **Details**: Turn off the pull-down refresh dynamically.\n\n## Events\n\n### `pullingDown`\n\n - **Arguments**: None\n - **Trigger**: A `pullingDown` event is fired when the top pull-down distance is greater than the `threshold` value after touchend.\n\n::: danger Note\nAfter the pull-down refresh action is detected, the consumption opportunity of the `pullingDown` hook is only once, so you need to call `finishPullDown()` to tell BetterScroll to provide the next consumption opportunity of the `pullingDown` event.\n:::\n\n### `enterThreshold` \n\n - **Arguments**: None\n - **Trigger**: when pulldown is in the **moving** state and **enters** threshold area.\n\n### `leaveThreshold` \n\n - **Arguments**: None\n - **Trigger**: when pulldown is in the **moving** state and **leaves** threshold area."
},
{
"path": "packages/vuepress-docs/docs/en-US/plugins/pullup.md",
"content": "# pullup\n\n## Introduction\n\nThe pullup plugin provides BetterScroll with the ability to monitor pulldown operation.\n\n## Install\n\n```bash\nnpm install @better-scroll/pull-up --save\n\n// or\n\nyarn add @better-scroll/pull-up\n```\n\n## Usage\n\nFirst, install the plugin via the static method `BScroll.use()`\n\n```js\n import BScroll from '@better-scroll/core'\n import PullUp from '@better-scroll/pull-up'\n\n BScroll.use(PullUp)\n```\n\npass in the correct configuration in [options](./pullup.html#pullupload-options), for example:\n\n```js\n new BScroll('.bs-wrapper', {\n pullUpLoad: true\n })\n```\n\n## Demo\n\n\n \n <<< @/examples/vue/components/pullup/default.vue?template\n \n \n <<< @/examples/vue/components/pullup/default.vue?script\n \n \n <<< @/examples/vue/components/pullup/default.vue?style\n \n \n\n\n## pullUpLoad Options\n\n### threshold\n\n - **Type**: `number`\n - **Default**: `0`\n\n The threshold for triggering a `pullingUp` hook.\n\n:::tip\nWhen `pullUpLoad` is configured as `true`, the plugin uses the default plugin option.\n\n```js\nconst bs = new BScroll('.wrapper', {\n pullUpLoad: true\n})\n\n// equals\n\nconst bs = new BScroll('.wrapper', {\n pullUpLoad: {\n threshold: 0\n }\n})\n```\n:::\n\n## Instance Methods\n\n:::tip\nAll methods are proxied to BetterScroll instance, for example:\n\n```js\nimport BScroll from '@better-scroll/core'\nimport PullUp from '@better-scroll/pull-up'\n\nBScroll.use(PullUp)\n\nconst bs = new BScroll('.bs-wrapper', {\n pullUpLoad: true\n})\n\nbs.finishPullUp()\nbs.openPullUp({})\nbs.closePullUp()\n```\n:::\n\n### `finishPullUp()`\n\n - **Details**: Finish the pullUpLoad behavior.\n\n ::: warning\n Every time you trigger the `pullingUp` hook, you should **actively call** `finishPullUp()` to tell BetterScroll to be ready for the next pullingUp hook.\n :::\n\n### `openPullUp(config: PullUpLoadOptions = {})`\n\n - **Details**: Turn on the pullUpLoad dynamically.\n - **Arguments**:\n - `{ PullDownRefreshOptions } config`: Modify the option of the pullup plugin\n - `PullDownRefreshOptions`:\n\n ```typescript\n export type PullUpLoadOptions = Partial | true\n\n export interface PullUpLoadConfig {\n threshold: number\n }\n ```\n\n ::: warning\n The **openPullUp** method should be used with **closePullUp**, because in the process of generating the pullup plugin, the pullUpLoad action has been automatically monitored.\n :::\n\n### `closePullUp()`\n\n - **Details**: Turn off pullUpLoad dynamically.\n\n### `autoPullUpLoad()`\n\n - **Details**：Auto pullUp.\n\n## Events\n\n### `pullingUp`\n\n - **Arguments**: None\n - **Trigger**: When the distance to the bottom is less than the value of `threshold`, a `pullingUp` event is triggered.\n\n > When threshold is a positive number, it means `pullingUp` is triggered when the threshold pixel is away from the scroll boundary. On the contrary, it means that the event will be triggered when it crosses the scroll boundary.\n\n::: danger Note\nAfter the pullUpLoad action is detected, the consumption opportunity of the `pullingUp` event is only once, so you need to call `finishPullUp()` to tell BetterScroll to provide the next consumption opportunity of the `pullingUp` event.\n:::\n"
},
{
"path": "packages/vuepress-docs/docs/en-US/plugins/scroll-bar.md",
"content": "# scrollbar\n\n## Introduciton\n\nThe scrollbar plugin provides a nice scrollbar for BetterScroll.\n\n:::tip\nFor v2.2.0, users can provide custom scroll bars.\n:::\n\n## Install\n\n```bash\nnpm install @better-scroll/scroll-bar --save\n\n// or\n\nyarn add @better-scroll/scroll-bar\n```\n\n## Usage\n\nFirst, install the plugin via the static method `BScroll.use()`\n\n```js\nimport BScroll from '@better-scroll/core'\nimport ScrollBar from '@better-scroll/scroll-bar'\n\nBScroll.use(ScrollBar)\n```\n\npass correct [scrollbar options](./scroll-bar.html#scrollbar-options)\n\n```js\nnew BScroll('.bs-wrapper', {\n scrollY: true,\n scrollbar: true\n})\n```\n\n## Demo\n\n - **Vertical Scrollbar**\n\n \n \n <<< @/examples/vue/components/scrollbar/vertical.vue?template\n \n \n <<< @/examples/vue/components/scrollbar/vertical.vue?script\n \n \n <<< @/examples/vue/components/scrollbar/vertical.vue?style\n \n \n \n\n - **Horizontal Scrollbar**\n\n \n \n <<< @/examples/vue/components/scrollbar/horizontal.vue?template\n \n \n <<< @/examples/vue/components/scrollbar/horizontal.vue?script\n \n \n <<< @/examples/vue/components/scrollbar/horizontal.vue?style\n \n \n \n\n - **Custom Scrollbar**\n\n \n \n <<< @/examples/vue/components/scrollbar/custom.vue?template\n \n \n <<< @/examples/vue/components/scrollbar/custom.vue?script\n \n \n <<< @/examples/vue/components/scrollbar/custom.vue?style\n \n \n \n\n - **With Mousewheel**\n\n \n \n <<< @/examples/vue/components/scrollbar/mousewheel.vue?template\n \n \n <<< @/examples/vue/components/scrollbar/mousewheel.vue?script\n \n \n <<< @/examples/vue/components/scrollbar/mousewheel.vue?style\n \n \n \n\n\n## scrollbar options\n\n### fade\n\n - **Type**: `boolean`\n - **Default**: `true`\n\n When the scroll stops, the scrollbar fades out.\n\n### interactive\n\n - **Type**: `boolean`\n - **Default**: `false`\n\n Whether scrollbar can interacted with.\n### customElements \n\n - **Type**: `HTMLElement[]`\n - **Default**: `[]`\n\n The user provides a custom scroll bar.\n\n ```js\n // horizontal\n const horizontalEl = document.getElementById('User-defined scrollbar')\n new BScroll('.bs-wrapper', {\n scrollY: true,\n scrollbar: {\n customElements: [horizontalEl]\n }\n })\n // vertical\n const verticalEl = document.getElementById('User-defined scrollbar')\n new BScroll('.bs-wrapper', {\n scrollY: false,\n scrollX: true,\n scrollbar: {\n customElements: [verticalEl]\n }\n })\n // freeScroll\n const horizontalEl = document.getElementById('User-defined scrollbar')\n const verticalEl = document.getElementById('User-defined scrollbar')\n new BScroll('.bs-wrapper', {\n freeScroll: true,\n scrollbar: {\n // When there are two scrollbars\n // the first element of the array is the horizontal\n customElements: [horizontalEl, verticalEl]\n }\n })\n ```\n\n### minSize \n\n - **Type**: `number`\n - **Default**: `8`\n\n The minimum size of the scrollbar. When the user provides a custom scrollbar, this configuration is invalid.\n\n### scrollbarTrackClickable \n\n - **Type**: `boolean`\n - **Default**: `false`\n\n Whether the scrollbar track allows clicking.\n\n **Note**：When enabling this configuration, please ensure that the `click` of BetterScroll Options is true, otherwise the click event cannot be triggered. [The reason is here](../FAQ/diagnosis.html#question-4-why-are-the-listeners-for-all-click-events-inside-betterscroll-content-not-triggered).\n\n ```js\n new BScroll('.bs-wrapper', {\n scrollY: true,\n click: true // essential\n scrollbar: {\n scrollbarTrackClickable: true\n }\n })\n ```\n\n### scrollbarTrackOffsetType \n\n - **Type**: `string`\n - **Default**: `'step'`\n\n After the scroll bar track is clicked, the calculation method of the scroll distance is the same as the browser's performance by default. It can be configured as `'clickedPoint'`, which means the scroll bar is scrolled to the clicked position.\n\n### scrollbarTrackOffsetTime \n\n - **Type**: `number`\n - **Default**: `300`\n\n the scroll time after the scrollbar track is clicked.\n\n### fadeInTime \n\n - **Type**: `number`\n - **Default**: `250`\n\n The duration of the animation when the scrollbar fades in.\n\n### fadeOutTime \n\n - **Type**: `number`\n - **Default**: `500`\n\n The duration of the animation when the scrollbar fades out.\n\n:::tip\nWhen `scrollbar` is configured as `true`, the plugin uses the default plugin option.\n\n```js\nconst bs = new BScroll('.wrapper', {\n scrollbar: true\n})\n\n// equals\n\nconst bs = new BScroll('.wrapper', {\n scrollbar: {\n fade: true,\n interactive: false,\n // supported in v2.2.0\n customElements: [],\n minSize: 8,\n scrollbarTrackClickable: false,\n scrollbarTrackOffsetType: 'step',\n scrollbarTrackOffsetTime: 300,\n // supported in v2.4.0\n fadeInTime: 250,\n fadeOutTime: 500\n }\n})\n```\n:::\n"
},
{
"path": "packages/vuepress-docs/docs/en-US/plugins/slide.md",
"content": "# slide\n\n## Introduction\n\nslide expands the ability of carousel for BetterScroll.\n\n## Install\n\n```bash\nnpm install @better-scroll/slide --save\n\n// or\n\nyarn add @better-scroll/slide\n```\n\n## Usage\n\nimport `slide`, then call `BScroll.use()`.\n\n```js\n import BScroll from '@better-scroll/core'\n import Slide from '@better-scroll/slide'\n\n BScroll.use(Slide)\n```\n\npass in the correct configuration in options, for example:\n\n```js\n new BScroll('.bs-wrapper', {\n scrollX: true,\n scrollY: false,\n slide: {\n threshold: 100\n },\n momentum: false,\n bounce: false,\n stopPropagation: true\n })\n```\n\nThe following is related to `slide` plugin and [BetterScroll configuration](../guide/base-scroll-options.html):\n\n- **slide(for plugin)**\n\n Enable zoom functionality. That is to say, the zoom plugin won't work without the zoom options, see [slide options](./slide.html#slide-options).\n\n- **scrollX**\n\n When the value is true, set the direction of slide to **horizontal**.\n\n- **scrollY**\n\n When the value is true, set the direction of slide to **vertical**. **Note: scrollX and scrollY cannot be set to true at the same time**\n\n- **momentum**\n\n When using slide, this value needs to be set to false to avoid the problem of flickering during fast scrolling caused by inertial animation and the problem of scrolling multiple pages at a time during fast sliding.\n\n- **bounce**\n\n The bounce value needs to be set to false, otherwise it will flicker when the loop is true.\n\n- **probeType**\n\n If you want to register the `slideWillChange` event to get the change of the PageIndex of the slide in real time when the user drags the slide, you need to set the probeType value to 2 or 3.\n\n## Terms about slide\n\nIn general, the layout of BetterScroll's slide is as follows:\n\n```html\n
![](\"https://dpubstatic.udache.com/static/dpubimg/t_L6vAgQ-E/logo.svg\"){kind=logo}
\n\n[](https://www.npmjs.com/package/better-scroll) [](https://www.npmjs.com/package/better-scroll) [](https://travis-ci.org/ustbhuangyi/better-scroll) [](http://packagequality.com/#?package=better-scroll) [](http://codecov.io/github/ustbhuangyi/better-scroll) [](https://gitpod.io/from-referrer/)\n\n[中文文档](https://github.com/ustbhuangyi/better-scroll/blob/master/README_zh-CN.md)\n\n[1.x Docs](https://better-scroll.github.io/docs-v1/)\n\n[2.x Docs](https://better-scroll.github.io/docs/en-US/)\n\n[2.x Demo](https://better-scroll.github.io/examples/)\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/core # 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/core'\n\nlet bs = new BScroll('.wrapper', {})\n```\n\n# CDN\n\nBetterScroll with full-featured plugin.\n\n```html\n\n\n\n\n```\n\n```js\nlet wrapper = document.getElementById(\"wrapper\")\nlet bs = BetterScroll.createBScroll(wrapper, {})\n```\n\n\nOnly CoreScroll\n\n```html\n\n\n\n\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://github.com/cubiq/iscroll), 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
\n 
\n 
\n 
\n 
\n 
\n ))}\n 
\n 
\n