{"id":13564000,"url":"https://github.com/tangbc/vue-virtual-scroll-list","last_synced_at":"2025-05-11T03:39:38.576Z","repository":{"id":37431367,"uuid":"85284135","full_name":"tangbc/vue-virtual-scroll-list","owner":"tangbc","description":"⚡️A vue component support big amount data list with high render performance  and efficient.","archived":false,"fork":false,"pushed_at":"2024-05-08T09:48:51.000Z","size":3522,"stargazers_count":4486,"open_issues_count":78,"forks_count":600,"subscribers_count":63,"default_branch":"master","last_synced_at":"2025-05-07T23:04:28.260Z","etag":null,"topics":["big-data","infinite-scroll","virtual-list"],"latest_commit_sha":null,"homepage":"https://tangbc.github.io/vue-virtual-scroll-list","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/tangbc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-17T07:40:42.000Z","updated_at":"2025-05-05T00:14:59.000Z","dependencies_parsed_at":"2024-06-18T11:01:17.588Z","dependency_job_id":"1a853d99-1458-48c2-9a11-59920476a886","html_url":"https://github.com/tangbc/vue-virtual-scroll-list","commit_stats":{"total_commits":525,"total_committers":33,"mean_commits":"15.909090909090908","dds":0.2114285714285714,"last_synced_commit":"afa413d810a9423de70a9e8154aea9aea0ecb5c6"},"previous_names":[],"tags_count":82,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangbc%2Fvue-virtual-scroll-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangbc%2Fvue-virtual-scroll-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangbc%2Fvue-virtual-scroll-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangbc%2Fvue-virtual-scroll-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tangbc","download_url":"https://codeload.github.com/tangbc/vue-virtual-scroll-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252968114,"owners_count":21833251,"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":["big-data","infinite-scroll","virtual-list"],"created_at":"2024-08-01T13:01:25.410Z","updated_at":"2025-05-07T23:04:36.033Z","avatar_url":"https://github.com/tangbc.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI Layout [🔝](#readme)","UI布局","Components \u0026 Libraries","UI Layout"],"sub_categories":["游览","UI Layout","Form","Tour"],"readme":"\u003cp\u003e\n  \u003ca href=\"https://travis-ci.org/tangbc/vue-virtual-scroll-list\"\u003e\n    \u003cimg alt=\"CIStatus\" src=\"https://travis-ci.org/tangbc/vue-virtual-scroll-list.svg?branch=master\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- \u003ca href=\"https://codecov.io/gh/tangbc/vue-virtual-scroll-list\"\u003e\n    \u003cimg alt=\"Code Coverage\" src=\"https://codecov.io/gh/tangbc/vue-virtual-scroll-list/branch/master/graph/badge.svg\"/\u003e\n  \u003c/a\u003e --\u003e\n  \u003ca href=\"https://npm-stat.com/charts.html?package=vue-virtual-scroll-list\"\u003e\n    \u003cimg alt=\"Downloads\" src=\"https://img.shields.io/npm/dm/vue-virtual-scroll-list.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.com/package/vue-virtual-scroll-list\"\u003e\n    \u003cimg alt=\"Version\" src=\"https://img.shields.io/npm/v/vue-virtual-scroll-list.svg\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- \u003ca href=\"https://vuejs.org/\"\u003e\n    \u003cimg alt=\"Vue version\" src=\"https://img.shields.io/badge/vue-%3E=2.3.0-brightgreen.svg\"/\u003e\n  \u003c/a\u003e --\u003e\n  \u003ca href=\"http://packagequality.com/#?package=vue-virtual-scroll-list\"\u003e\n    \u003cimg alt=\"Quality\" src=\"https://npm.packagequality.com/shield/vue-virtual-scroll-list.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Table of contents\n\n* [Advantages](#advantages)\n* [Live demo](#live-demo)\n* [Simple usage](#simple-usage)\n* [**Props type**](#props-type)\n  * [Required props](#required-props)\n  * [Optional props](#optional-props)\n  * [Public methods](#public-methods)\n* [Attentions](#attentions)\n\n\n## Advantages\n\n* Only 3 required props, simple and very easy to use.\n\n* Big data list with high render performance and efficient.\n\n* You don't have to care about item size, it will calculate automatic.\n\n\n## Live demo\n\nhttps://tangbc.github.io/vue-virtual-scroll-list\n\nhttps://codesandbox.io/s/live-demo-virtual-list-e1ww1\n\n\n## Simple usage\n\n```bash\nnpm install vue-virtual-scroll-list --save\n```\n\nRoot component:\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cvirtual-list style=\"height: 360px; overflow-y: auto;\" // make list scrollable\n      :data-key=\"'uid'\"\n      :data-sources=\"items\"\n      :data-component=\"itemComponent\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Item from './Item'\n  import VirtualList from 'vue-virtual-scroll-list'\n\n  export default {\n    name: 'root',\n    data () {\n      return {\n        itemComponent: Item,\n        items: [{uid: 'unique_1', text: 'abc'}, {uid: 'unique_2', text: 'xyz'}, ...]\n      }\n    },\n    components: { 'virtual-list': VirtualList }\n  }\n\u003c/script\u003e\n```\n\nItem component:\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e{{ index }} - {{ source.text }}\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    name: 'item-component',\n    props: {\n      index: { // index of current item\n        type: Number\n      },\n      source: { // here is: {uid: 'unique_1', text: 'abc'}\n        type: Object,\n        default () {\n          return {}\n        }\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\nMore usages or getting start you can refer to these clearly [examples](https://github.com/tangbc/vue-virtual-scroll-list/tree/master/example/src/views).\n\n\n## Props type\n\n### Required props\n\n| **\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;Prop\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;** | **Type**  | **Description**                                                               |\n|------------------|------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `data-key`       | String\\|Function | The unique key get from `data-sources` in each data object. Or a function called with each `data-source` and return their unique key. Its value **must be unique** in `data-sources`, it is used for identifying item size. |\n| `data-sources`   | Array[Object]    | The source array built for list, each array data must be an object and has an unique key get or generate for `data-key` property.                                                                                           |\n| `data-component` | Component        | The render item component created / declared by vue, and it will use the data object in `data-sources` as render prop and named: `source`.                                                                                  |\n\n### Optional props\n\n\u003cdetails open\u003e\n  \u003csummary\u003e\u003cstrong\u003eCommonly used\u003c/strong\u003e\u003c/summary\u003e\n  \u003cp\u003e\u003c/p\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003cth\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;Prop\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ekeeps\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e30\u003c/td\u003e\n      \u003ctd\u003eHow many items you are expecting the virtual list to keep rendering in the real dom.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eextra-props\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eObject\u003c/td\u003e\n      \u003ctd\u003e{}\u003c/td\u003e\n      \u003ctd\u003eExtra props assign to item component that are not in \u003ccode\u003edata-sources\u003c/code\u003e. Notice: \u003ccode\u003eindex\u003c/code\u003e and \u003ccode\u003esource\u003c/code\u003e are both occupied inner.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eestimate-size\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e50\u003c/td\u003e\n      \u003ctd\u003eThe estimate size of each item, if it is closer to the average size, the scrollbar length looks more accurately. It is \u003cstrong\u003erecommended\u003c/strong\u003e to assign the average that calculate by yourself.\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eUncommonly used\u003c/strong\u003e\u003c/summary\u003e\n  \u003cp\u003e\u003c/p\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003cth\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;Prop\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003estart\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e0\u003c/td\u003e\n      \u003ctd\u003eSetting scroll position stay start index.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eoffset\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e0\u003c/td\u003e\n      \u003ctd\u003eSetting scroll position stay offset.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003escroll\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eEvent\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eEmited when scrolling, param \u003ccode\u003e(event, range)\u003c/code\u003e.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003etotop\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eEvent\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eEmited when scrolled to top or left, no param.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003etobottom\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eEvent\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eEmited when scrolled to bottom or right, no param.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eresized\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eEvent\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eEmited when item resized (mounted), param \u003ccode\u003e(id, size)\u003c/code\u003e.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003evertical\u003c/td\u003e\n      \u003ctd\u003eScroll direction, available values are \u003ccode\u003evertical\u003c/code\u003e and \u003ccode\u003ehorizontal\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003epage-mode\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003eLet virtual list using global document to scroll through the list.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003etop-threshold\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e0\u003c/td\u003e\n      \u003ctd\u003eThe threshold to emit \u003ccode\u003etotop\u003c/code\u003e event, attention to multiple calls.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ebottom-threshold\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e0\u003c/td\u003e\n      \u003ctd\u003eThe threshold to emit \u003ccode\u003etobottom\u003c/code\u003e event, attention to multiple calls.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eroot-tag\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003ediv\u003c/td\u003e\n      \u003ctd\u003eRoot element tag name.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ewrap-tag\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003ediv\u003c/td\u003e\n      \u003ctd\u003eList wrapper element \u003ccode\u003e(role=group)\u003c/code\u003e tag name.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ewrap-class\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eList wrapper element class name.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ewrap-style\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eObject\u003c/td\u003e\n      \u003ctd\u003e{}\u003c/td\u003e\n      \u003ctd\u003eList wrapper element inline style.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eitem-tag\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003ediv\u003c/td\u003e\n      \u003ctd\u003eItem wrapper element \u003ccode\u003e(role=item)\u003c/code\u003e tag name.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eitem-class\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eItem wrapper element class name.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eitem-class-add\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eFunction\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eA function that you can return extra class (String) to item wrapper element, param \u003ccode\u003e(index)\u003c/code\u003e.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eitem-style\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eObject\u003c/td\u003e\n      \u003ctd\u003e{}\u003c/td\u003e\n      \u003ctd\u003eItem wrapper element inline style.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eitem-scoped-slots\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eObject\u003c/td\u003e\n      \u003ctd\u003e{}\u003c/td\u003e\n      \u003ctd\u003eThe \u003ccode\u003e$scopedSlots\u003c/code\u003e for item component.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eheader-tag\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003ediv\u003c/td\u003e\n      \u003ctd\u003eFor using header slot, header slot wrapper element \u003ccode\u003e(role=header)\u003c/code\u003e tag name.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eheader-class\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eFor using header slot, header slot wrapper element class name.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eheader-style\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eObject\u003c/td\u003e\n      \u003ctd\u003e{}\u003c/td\u003e\n      \u003ctd\u003eFor using header slot, header slot wrapper element inline style.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003efooter-tag\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003ediv\u003c/td\u003e\n      \u003ctd\u003eFor using footer slot, footer slot wrapper element \u003ccode\u003e(role=footer)\u003c/code\u003e tag name.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003efooter-class\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eFor using footer slot, footer slot wrapper element class name.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003efooter-style\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eObject\u003c/td\u003e\n      \u003ctd\u003e{}\u003c/td\u003e\n      \u003ctd\u003eFor using using footer slot, footer slot wrapper element inline style.\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/details\u003e\n\n### Public methods\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eUsefull public methods\u003c/strong\u003e\u003c/summary\u003e\n  \u003cp\u003e\u003c/p\u003e\n  \u003cp\u003eYou can call these methods via \u003ccode\u003e\u003ca href=\"https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements\"\u003eref\u003c/a\u003e\u003c/code\u003e:\u003c/p\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003cth\u003eMethod\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ereset()\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eReset all state back to initial.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003escrollToBottom()\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eManual set scroll position to bottom.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003escrollToIndex(index)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eManual set scroll position to a designated index.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003escrollToOffset(offset)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eManual set scroll position to a designated offset.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003egetSize(id)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGet the designated item size by id (from \u003ccode\u003edata-key\u003c/code\u003e value).\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003egetSizes()\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGet the total number of stored (rendered) items.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003egetOffset()\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGet current scroll offset.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003egetClientSize()\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGet wrapper element client viewport size (width or height).\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003egetScrollSize()\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eGet all scroll size (scrollHeight or scrollWidth).\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eupdatePageModeFront()\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eWhen using page mode and virtual list root element offsetTop or offsetLeft change, you need call this method manually.\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/details\u003e\n\n\n## Attentions\n\nThis component use an `in-place patch` strategy to render list instead of `v-for` and `:key`. This way achieves the best efficient, but only suitable when your list output does not rely on item component inner state or temporary DOM state (e.g. form input values).\n\nBut how to deal with such a situation? Without maintaining inner state, recommend to use props and dispatch (stateless component), here is an example [keep-state](https://tangbc.github.io/vue-virtual-scroll-list/#/keep-state).\n\n\n## Contributions\n\nWelcome to improve this component with any issue, pull request or code review.\n\n\n## Changelogs\n\nMaintain and update occasionally, for changes see [release](https://github.com/tangbc/vue-virtual-scroll-list/releases).\n\n\n## License\n\n[MIT License](https://github.com/tangbc/vue-virtual-scroll-list/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftangbc%2Fvue-virtual-scroll-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftangbc%2Fvue-virtual-scroll-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftangbc%2Fvue-virtual-scroll-list/lists"}