{"id":18501200,"url":"https://github.com/dhilt/vscroll","last_synced_at":"2026-02-15T22:18:28.512Z","repository":{"id":44643782,"uuid":"325435971","full_name":"dhilt/vscroll","owner":"dhilt","description":"A JavaScript Virtual Scroll Engine","archived":false,"fork":false,"pushed_at":"2026-02-07T22:56:47.000Z","size":2054,"stargazers_count":43,"open_issues_count":4,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-02-08T06:55:36.767Z","etag":null,"topics":["infinite-scroll","javascript","typescript","virtual-list","virtual-scroll","virtual-scroller","virtual-scrolling","virtualization","virtualscroll"],"latest_commit_sha":null,"homepage":"https://dhilt.github.io/vscroll/","language":"TypeScript","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/dhilt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"open_collective":"ngx-ui-scroll","custom":"paypal.me/daleksanov"}},"created_at":"2020-12-30T02:35:23.000Z","updated_at":"2026-02-07T22:50:57.000Z","dependencies_parsed_at":"2022-08-12T11:20:52.060Z","dependency_job_id":"f9272858-1b4c-4e03-8355-7eb7444a23ff","html_url":"https://github.com/dhilt/vscroll","commit_stats":{"total_commits":911,"total_committers":9,"mean_commits":"101.22222222222223","dds":0.03732162458836441,"last_synced_commit":"6c22ac539ae6028732512d152806a42da9855f93"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"purl":"pkg:github/dhilt/vscroll","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhilt%2Fvscroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhilt%2Fvscroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhilt%2Fvscroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhilt%2Fvscroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dhilt","download_url":"https://codeload.github.com/dhilt/vscroll/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhilt%2Fvscroll/sbom","scorecard":{"id":340294,"data":{"date":"2025-08-11","repo":{"name":"github.com/dhilt/vscroll","commit":"e0f8fcc984d80577df69d8f6fe7146d6a0c81a98"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.5,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":5,"reason":"7 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 5","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/build.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":0,"reason":"Found 0/7 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":3,"reason":"dependency not pinned by hash detected -- score normalized to 3","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/dhilt/vscroll/build.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/dhilt/vscroll/build.yml/main?enable=pin","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   1 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 28 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T05:38:31.836Z","repository_id":44643782,"created_at":"2025-08-18T05:38:31.836Z","updated_at":"2025-08-18T05:38:31.836Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29490543,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-15T19:29:10.908Z","status":"ssl_error","status_checked_at":"2026-02-15T19:29:10.419Z","response_time":118,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["infinite-scroll","javascript","typescript","virtual-list","virtual-scroll","virtual-scroller","virtual-scrolling","virtualization","virtualscroll"],"created_at":"2024-11-06T13:52:10.876Z","updated_at":"2026-02-15T22:18:28.506Z","avatar_url":"https://github.com/dhilt.png","language":"TypeScript","readme":"[![build status](https://github.com/dhilt/vscroll/actions/workflows/build.yml/badge.svg)](https://github.com/dhilt/vscroll/actions/workflows/build.yml)\n[![npm version](https://badge.fury.io/js/vscroll.svg)](https://www.npmjs.com/package/vscroll)\n\n# VScroll\n\n- [Overview](#overview)\n- [Getting started](#getting-started)\n- [Usage](#usage)\n  - [Consumer](#1-consumer)\n  - [Element](#2-element)\n  - [Datasource](#3-datasource)\n  - [Run](#4-run)\n  - [Routines](#5-routines)\n- [Live](#live)\n- [Adapter API](#adapter-api)\n- [Thanks](#thanks)\n\n## Overview\n\nVScroll is a JavaScript library providing virtual scroll engine. Can be seen as a core for platform-specific solutions designed to represent unlimited datasets using virtualization technique. Below is the diagram of how the VScroll engine is being distributed to the end user.\n\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/4365660/104845671-ad1d4b80-58e7-11eb-9cc9-4a00ebcbc9e8.png\"\u003e\n\u003c/p\u003e\n\nBasically, the consumer layer can be omitted and the end Application developers can use VScroll directly. This repository has a [minimal demo page](https://dhilt.github.io/vscroll/) of direct use of the VScroll library in a non-specific environment. There are also several consumer implementations built on top of VScroll:\n\n  - [ngx-ui-scroll](https://github.com/dhilt/ngx-ui-scroll), Angular virtual scroll directive\n  - [vscroll-native](https://github.com/dhilt/vscroll-native), virtual scroll module for native JavaScript applications\n  - [Vue integration sample](https://stackblitz.com/edit/vscroll-vue-integration?file=src%2Fcomponents%2FVScroll.vue), very rough implementation for Vue\n\n## Getting started\n\n### CDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vscroll\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const workflow = new VScroll.Workflow(...);\n\u003c/script\u003e\n```\n\n### NPM\n\n```\nnpm install vscroll\n```\n\n```js\nimport { Workflow } from 'vscroll';\n\nconst workflow = new Workflow(...);\n```\n\n## Usage\n\nThe main entity distributed via `vscroll` is the `Workflow` class. Its instantiating runs the virtual scroll engine.\n\n```js\nnew Workflow({ consumer, element, datasource, run });\n```\n\nThe constructor of the `Workflow` class requires an argument of the following type:\n\n```typescript\ninterface WorkflowParams\u003cItemData\u003e {\n  consumer: IPackage;\n  element: HTMLElement;\n  datasource: IDatasource\u003cItemData\u003e;\n  run: OnDataChanged\u003cItemData\u003e;\n  Routines?: RoutinesClassType;\n}\n```\n\nThis is a TypeScript definition, but speaking of JavaScript, an argument object must contain 4 mandatory and 1 optional fields described below.\n\n### 1. Consumer\n\nA simple data object that provides information about a consumer. It is not critical to omit this, but if the result solution is going to be published as a separate 3d-party library (\"consumer\"), the name and the version of the result package should be passed as follows:\n\n```js\nconst consumer = {\n  name: 'my-vscroll-consumer',\n  version: 'v1.0.0-alpha.1'\n};\n```\n\n### 2. Element\n\nAn HTML element the `Workflow` should use as a scrollable part of the viewport. It should be present in DOM before instantiating the `Workflow`.\n\n```js\nconst element = document.getElementById('vscroll');\n```\n\nThis element should be wrapped with another container with constrained height and overflow scroll/auto. And it also must have two special padding elements marked with special attributes for the virtualization purpose.\n\n```html\n\u003cdiv id=\"viewport\"\u003e\n  \u003cdiv id=\"vscroll\"\u003e\n    \u003cdiv data-padding-backward\u003e\u003c/div\u003e\n    \u003cdiv data-padding-forward\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n```css\n#viewport {\n  height: 300px;\n  overflow-y: scroll;\n}\n```\n\n### 3. Datasource\n\nThis is a special object, providing dataset items in runtime. There is a separate wiki document describing the Datasource: [github.com/dhilt/vscroll/wiki/Datasource](https://github.com/dhilt/vscroll/wiki/Datasource). Below is a short version.\n\nThe Datasource can be defined in two ways. First, as an object literal:\n\n```js\nconst datasource = {\n  get: (index, count, success) =\u003e {\n    const data = [];\n    for (let i = index; i \u003c index + count; i++) {\n      data.push({ id: i, text: 'item #' + i });\n    }\n    success(data);\n  }\n};\n```\n\nSecond, as an instance of Datasource class which can be obtained through a special factory method. Along with the `Workflow` class, VScroll exposes the `makeDatasource` method which can be used for creating Datasource class, so the end datasource object can be instantiated via operator `new`:\n\n```js\nimport { makeDatasource } from 'vscroll';\nconst Datasource = makeDatasource();\n\nconst datasource = new Datasource({\n  get: (index, length, success) =\u003e\n    success(Array.from({ length }).map((_, i) =\u003e\n      ({ id: index + i, text: 'item #' + (index + i) })\n    ))\n});\n```\n\nThe argument of the Datasource class is the same object literal as in the first case. It has one mandatory field which is the core of the App-Scroller integration: method `get`. The `Workflow` requests data via the `Datasource.get` method in runtime.\n\nFor more solid understanding the concept of the Datasource with examples, please, refer to [the Datasource doc](https://github.com/dhilt/vscroll/wiki/Datasource).\n\n### 4. Run\n\nA callback that is called every time the Workflow decides that the UI needs to be changed. Its argument is a list of items to be present in the UI. This is a consumer responsibility to detect changes and display them in the UI.\n\n```js\nconst run = newItems =\u003e {\n  // assume oldItems contains a list of items that are currently present in the UI\n  if (!newItems.length \u0026\u0026 !oldItems.length) {\n    return;\n  }\n  // make newItems to be present in the UI instead of oldItems\n  processItems(newItems, oldItems);\n  oldItems = newItems;\n};\n```\n\nEach item (in both `newItems` and `oldItems` lists) is an instance of the [Item class](https://github.com/dhilt/vscroll/blob/v1.5.0/src/classes/item.ts) implementing the [Item interface](https://github.com/dhilt/vscroll/blob/v1.5.0/src/interfaces/item.ts), whose props can be used for proper implementation of the `run` callback:\n\n|Name|Type|Description|\n|:--|:--|:----|\n|element|_HTMLElement_|HTML element associated with the item|\n|$index|_number_|Integer index of the item in the Datasource. Correlates with the first argument of the Datasource.get method|\n|data|_Data_|Data (contents) of the item. This is what the Datasource.get passes to the Scroller via success-callback as an array of data-items typed as Data[]|\n|invisible|_boolean_|Flag that determines whether the item should be hidden (if _true_) or visible (if _false_) when the _run_ method is called|\n|get|_()\u0026nbsp;=\u003e\u0026nbsp;ItemAdapter\u0026lt;Data\u0026gt;_|Shortcut method returning { element, $index, data } object|\n\n`Run` callback is the most complex and environment-specific part of the `vscroll` API, which is fully depends on the environment for which the consumer is being created. Framework specific consumer should rely on internal mechanism of the framework to provide runtime DOM modifications.\n\nThere are some requirements on how the items should be processed by `run` call.\n\n- After the `run` callback is completed, there must be `newItems.length` elements in the DOM between backward and forward padding elements.\n- Old items that are not in the new items list should be removed from DOM. Use `oldItems[].element` references for this purpose.\n- Old items that are in the new items list should not be removed and recreated, as this may result in unwanted scroll position shifts. Just don't touch them.\n- New items elements should be rendered in the correct order. Specifically, in accordance with `newItems[].$index` comparable to `$index` of elements that remain: `$index` must increase continuously and the directions of increase must persist across the `run` calls. The scroller maintains `$index` internally, so you only need to properly inject a set of `newItems[].element` into the DOM.\n- New elements should be rendered without being visible, and this should be achieved by \"fixed\" positioning and \"left\"/\"top\" coordinates that take the item element out of view. The Workflow will take care of visibility after calculations. An additional `newItems[].invisible` attribute can be used to determine whether a given element should be hidden. This requirement can be changed by the `Routines` class setting (see below).\n- New items elements should have a \"data-sid\" attribute whose value should reflect `newItems[].$index`.\n\n### 5. Routines\n\nA special class allowing to override the default behavior related to the DOM. All DOM-specific operations are implemented as the [DOM Routines class](https://github.com/dhilt/vscroll/blob/v1.5.0/src/classes/domRoutines.ts) methods inside core. When the `Routines` class setting is passed among the Workflow arguments, it replaces the core Routines. The custom Routines class must extend the core class, which can be taken from the VScroll imports:\n\n```js\nimport { Routines, Workflow } from 'vscroll';\n\nclass CustomRoutines extends Routines { ... }\n\nnew Workflow({\n  consumer, element, datasource, run, // required params\n  Routines: CustomRoutines\n})\n```\n\nThe Routines methods description can be taken from the [IRoutines interface](https://github.com/dhilt/vscroll/blob/v1.5.0/src/interfaces/routines.ts) sources. For example, there is a method that calculates the scroller's offset:\n\n```typescript\ngetOffset(): number {\n  const get = (element: HTMLElement) =\u003e\n    (this.settings.horizontal ? element.offsetLeft : element.offsetTop) || 0;\n  return get(this.element) - (!this.settings.window ? get(this.viewport) : 0);\n}\n```\n\nIf we have a table layout case where we need to specify the offset of the table header, the base method can be overridden as follows:\n\n```js\nnew Workflow({\n  consumer, element, datasource, run, // required params\n  Routines: class extends Routines {\n    getOffset() {\n      return document.querySelector('#viewport thead')?.offsetHeight || 0;\n    }\n  }\n});\n```\n\nIt's worth noting that thanks to the extending, we can use parent methods and have access to the correct context after the engine instantiates the Routines:\n\n```js\nclass CustomRoutines extends Routines {\n  onInit(...args) {\n    console.log('Routines settings:', this.settings);\n    super.onInit(...args);\n  }\n}\n```\n\nVarious DOM calculations, setting/getting the scroll position, render process and other logic can be adjusted, improved or completely replaced by custom methods of the `Routines` class setting.\n\n## Live\n\nThis repository has a minimal demonstration of the App-consumer implementation considering all of the requirements listed above: https://dhilt.github.io/vscroll/. This is all-in-one HTML demo with `vscroll` taken from CDN. The source code of the demo is [here](https://github.com/dhilt/vscroll/blob/main/demo/index.html). The approach is rough and non-optimized, if you are seeking for more general solution for native JavaScript applications, please have a look at [vscroll-native](https://github.com/dhilt/vscroll-native) project. It is relatively new and has no good documentation, but its [source code](https://github.com/dhilt/vscroll-native/tree/main/src) and its [demo](https://github.com/dhilt/vscroll-native/tree/main/demo) may shed light on `vscroll` usage in no-framework environment.\n\nAnother example is [ngx-ui-scroll](https://github.com/dhilt/ngx-ui-scroll). Before 2021 `vscroll` was part of `ngx-ui-scroll`, and its [demo page](https://dhilt.github.io/ngx-ui-scroll/#/) contains well-documented samples that can be used to get an idea on the API and functionality offered by `vscroll`. The code of the [UiScrollComponent](https://github.com/dhilt/ngx-ui-scroll/blob/v2.3.1/src/ui-scroll.component.ts) clearly demonstrates the `Workflow` instantiation in the context of Angular. Also, since ngx-ui-scroll is the intermediate layer between `vscroll` and the end Application, the Datasource is being provided from the outside. Method `makeDatasource` is used to provide `Datasource` class to the end Application.\n\n## Adapter API\n\nAdapter API is a powerful feature of the `vscroll` engine allowing to collect the statistics and provide runtime manipulations with the viewport: adding, removing, updating items. This API is very useful when building the real-time interactive applications when data can change over time by not only scrolling (like chats).\n\nPlease refer to the ngx-ui-scroll [Adapter API doc](https://github.com/dhilt/ngx-ui-scroll#adapter-api) as it can be applied to `vscroll` case with only one important difference: vscroll does not have RxJs entities, it has [Reactive](https://github.com/dhilt/vscroll/blob/main/src/classes/reactive.ts) ones instead. It means, for example, `eof$` has no \"subscribe\" method, but \"on\":\n\n```js\n// ngx-ui-scroll\nmyDatasource.adapter.bof$.subscribe(value =\u003e\n  value \u0026\u0026 console.log('Begin of file is reached')\n);\n// vscroll\nmyDatasource.adapter.bof$.on(value =\u003e\n  value \u0026\u0026 console.log('Begin of file is reached')\n);\n```\n\nAdapter API becomes available as the `Datasource.adapter` property after the Datasource is instantiated via operator \"new\". In terms of \"vscroll\" you need to get a Datasource class by calling the `makeDatasource` method, then you can instantiate it. `makeDatasource` accepts 1 argument, which is an Adapter custom configuration. Currently this config can only be used to redefine the just mentioned Adapter reactive props. Here's an example of how simple Reactive props can be overridden with RxJs Subject and BehaviorSubject entities: [ui-scroll.datasource.ts](https://github.com/dhilt/ngx-ui-scroll/blob/v2.3.1/src/ui-scroll.datasource.ts). \n\nAn important note is that the Adapter getting ready breaks onto 2 parts: instantiation (which is synchronous with the Datasource instantiation) and initialization (which occurs during the Workflow instantiating). Adapter gets all necessary props and methods during the first phase, but they start work only when the second phase is done. Practically this means \n - you may arrange any Adapter reactive subscriptions in your app/consumer right after the Datasource is instantiated, \n - some of the initial (default) values can be unusable, like `Adapter.bufferInfo.minIndex` = NaN (because Scroller's Buffer is empty before the very first `Datasource.get` call),\n - Adapter methods do nothing when called before phase 2, they immediately resolve some default \"good\" value (`{ immediate: true, success: true, ... }`).\n\nIf there is some logic that could potentially run before the Adapter initialization and you don't want this to happen, the following approach can be applied:\n\n```js\nmyDatasource = new VScroll.makeDatasource()({...});\nmyDatasource.adapter.init$.once(() =\u003e {\n  console.log('The Adapter is initialized'); // 2nd output\n});\nworkflow = new VScroll.Workflow({...});\nconsole.log('The Workflow runs'); // 1st output\n```\n\nVScroll will receive its own Adapter API documentation later, but for now please refer to [ngx-ui-scroll](https://github.com/dhilt/ngx-ui-scroll#adapter-api).\n\n## Thanks\n\n \\- to [Mike Feingold](https://github.com/mfeingold) as he started all this story in far 2013,\n\n \\- to [Joshua Toenyes](https://github.com/JoshuaToenyes) as he transferred ownership to the \"vscroll\" npm repository which he owned but did not use,\n\n \\- to all contributors of related repositories ([link](https://github.com/angular-ui/ui-scroll/graphs/contributors), [link](https://github.com/dhilt/ngx-ui-scroll/graphs/contributors)),\n\n \\- to all donators as their great support does increase motivation.\n\n \u003cbr\u003e\n\n __________\n\n2026 \u0026copy; [Denis Hilt](https://github.com/dhilt)\n","funding_links":["https://opencollective.com/ngx-ui-scroll","paypal.me/daleksanov"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhilt%2Fvscroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdhilt%2Fvscroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhilt%2Fvscroll/lists"}