{"id":21646371,"url":"https://github.com/balmjs/balm-scroll","last_synced_at":"2025-09-21T23:24:49.049Z","repository":{"id":35007967,"uuid":"194770242","full_name":"balmjs/balm-scroll","owner":"balmjs","description":":scroll: Smooth scrolling for Vue.js","archived":false,"fork":false,"pushed_at":"2023-01-04T21:56:43.000Z","size":6097,"stargazers_count":1,"open_issues_count":20,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-29T10:44:57.947Z","etag":null,"topics":["balm","iscroll","vue"],"latest_commit_sha":null,"homepage":"https://iscroll.balmjs.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/balmjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-02T02:01:50.000Z","updated_at":"2020-06-18T01:18:18.000Z","dependencies_parsed_at":"2023-01-15T12:00:37.058Z","dependency_job_id":null,"html_url":"https://github.com/balmjs/balm-scroll","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balmjs%2Fbalm-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balmjs%2Fbalm-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balmjs%2Fbalm-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balmjs%2Fbalm-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/balmjs","download_url":"https://codeload.github.com/balmjs/balm-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244124191,"owners_count":20401685,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["balm","iscroll","vue"],"created_at":"2024-11-25T06:44:31.727Z","updated_at":"2025-09-21T23:24:43.970Z","avatar_url":"https://github.com/balmjs.png","language":"JavaScript","readme":"# Balm Scroll\n\n## What is BalmScroll?\n\niScroll based, smooth scrolling for Vue.js\n\n## [Demos \u0026 Documentation](https://iscroll.balmjs.com/)\n\n## Quick Start\n\n### 0. Requirement\n\n- [BalmJS](https://balmjs.com/)(Recommended) or other toolchains\n- [Vue.js](https://vuejs.org/)@2.1.0+\n\n### 1. Install\n\n```sh\nnpm i --save balm-scroll\n# OR\nyarn add balm-scroll\n```\n\n### 2. Usage\n\n#### 2.1 Css (Edit `my-project/app/styles/global/_vendor.scss`)\n\n```css\n@import 'node_modules/balm-scroll/dist/balm-scroll.scss';\n```\n\n#### 2.2 Js (Edit `my-project/app/scripts/main.js`)\n\nDefault Usage\n\n```js\nimport Vue from 'vue';\nimport BalmScroll from 'balm-scroll';\n\nVue.use(BalmScroll);\n```\n\nStandalone Usage\n\n```js\nimport Vue from 'vue';\nimport UiScroll from 'balm-scroll/components/scroll';\n// OR\n// import UiScrollLite from 'balm-scroll/components/scroll-lite';\n// import UiScrollProbe from 'balm-scroll/components/scroll-probe';\n// import UiScrollZoom from 'balm-scroll/components/scroll-zoom';\n// import UiScrollInfinite from 'balm-scroll/components/scroll-infinite';\n\nVue.use(UiScroll);\n```\n\n#### 2.3 Vue (Edit a vue component: `my-project/app/scripts/views/demos/hello.vue`)\n\n```html\n\u003ctemplate\u003e\n  \u003cui-scroll :options=\"options\"\u003e\n    \u003c!-- Content --\u003e\n  \u003c/ui-scroll\u003e\n\u003c/template\u003e\n```\n\n```js\nexport default {\n  data() {\n    return {\n      options: {\n        mouseWheel: true\n      }\n    };\n  }\n};\n```\n\n#### 2.4 Default css sprites\n\nDownload [`pull-icon@2x.png`](https://iscroll.balmjs.com/balm-scroll-images.zip) and extract to `/path/to/my-project/app/images`.\n\n\u003e ⚠️: Applicable only for the `\u003cui-scroll-probe\u003e`\n\n### 3. Configuring\n\n#### 3.1 The many faces of [iScroll](https://github.com/cubiq/iscroll/#the-many-faces-of-iscroll)\n\n- `\u003cui-scroll\u003e`\n- `\u003cui-scroll-lite\u003e`\n- `\u003cui-scroll-probe\u003e`\n- `\u003cui-scroll-zoom\u003e`\n- `\u003cui-scroll-infinite\u003e`\n\n\u003e Tips: You can [pick one](https://github.com/cubiq/iscroll/#the-many-faces-of-iscroll) component that better suits your need\n\n#### 3.2 Options\n\n- See [here](https://github.com/cubiq/iscroll/#configuring-the-iscroll)\n\n### 4. Props, Slots and Events\n\n#### 4.1 Props\n\n##### Common props\n\n| Name             | Type                          | Default | Description                                   |\n| ---------------- | ----------------------------- | ------- | --------------------------------------------- |\n| `options`        | `object`                      | `{}`    | iScroll options                               |\n| `excludes`       | `array`                       |         | Excludes for `touchmove` event preventDefault |\n| `pullDownAction` | `function(refresh: Function)` | `null`  | Pull down action                              |\n| `pullUpAction`   | `function(refresh: Function)` | `null`  | Pull up action                                |\n| `pullOffset`     | `number`                      | `5`     | Down and up offset for triggering pull action |\n| `scrollEnabled`  | `boolean`                     | `true`  | Load more data controls                       |\n\n##### `\u003cui-scroll-probe\u003e` extra props\n\n| Name            | Type                       | Default                  | Description          |\n| --------------- | -------------------------- | ------------------------ | -------------------- |\n| `pullDownLabel` | `string`                   | `'Pull down to refresh'` | Pull down label      |\n| `pullUpLabel`   | `string`                   | `'Pull up to load more'` | Pull up label        |\n| `releaseLabel`  | `string`                   | `'Release to update'`    | Release label        |\n| `loadingLabel`  | `string`                   | `'Loading...'`           | Loading label        |\n| `pullDownY`     | `number`                   | `5`                      | Pull down Y position |\n| `pullAction`    | `function(scroll: object)` | `null`                   | Scroll action        |\n\n⚠️ **Special refresh function for first loaded**\n\n```html\n\u003cui-scroll ref=\"iScroll\" :pullUpAction=\"pullUpAction\"\u003e\u003c/ui-scroll\u003e\n```\n\n```js\nexport default {\n  methods: {\n    firstLoaded() {\n      // Update here your DOM\n\n      this.$refs.iScroll.refresh();\n    },\n    pullUpAction(refresh) {\n      // Update here your DOM\n\n      setTimeout(function() {\n        refresh();\n      }, 0);\n    }\n  }\n};\n```\n\n#### 4.2 Slots\n\n| Name               | Description                                        |\n| ------------------ | -------------------------------------------------- |\n| `default`          | The default slot holds the scroll child components |\n| `pullDownIcon` ⚠️  | Custom pull down icon                              |\n| `pullDownLabel` ⚠️ | Custom pull down label                             |\n| `pullUpIcon` ⚠️    | Custom pull up icon                                |\n| `pullUpLabel` ⚠️   | Custom pull up label                               |\n\n\u003e ⚠️: Applicable only for the `\u003cui-scroll-probe\u003e`\n\n## Special Thanks to\n\n- [BalmJS](https://balmjs.com/)\n- [Vue.js](https://vuejs.org/)\n- [iScroll](https://github.com/cubiq/iscroll/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbalmjs%2Fbalm-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbalmjs%2Fbalm-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbalmjs%2Fbalm-scroll/lists"}