{"id":13760451,"url":"https://github.com/ashthornton/asscroll","last_synced_at":"2025-05-10T10:32:51.863Z","repository":{"id":38619108,"uuid":"234763247","full_name":"ashthornton/asscroll","owner":"ashthornton","description":"Ash's Smooth Scroll 🍑","archived":true,"fork":false,"pushed_at":"2023-03-11T16:46:05.000Z","size":1772,"stargazers_count":946,"open_issues_count":17,"forks_count":27,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-11-05T13:48:57.551Z","etag":null,"topics":["scroll","smooth-scroll","smooth-scroll-plugins","smooth-scrolling","smoothscroll"],"latest_commit_sha":null,"homepage":"","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/ashthornton.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,"governance":null}},"created_at":"2020-01-18T16:30:40.000Z","updated_at":"2024-10-26T12:50:24.000Z","dependencies_parsed_at":"2023-10-20T17:58:34.702Z","dependency_job_id":null,"html_url":"https://github.com/ashthornton/asscroll","commit_stats":{"total_commits":333,"total_committers":3,"mean_commits":111.0,"dds":"0.30330330330330335","last_synced_commit":"f13c692fc87c0e0842342d9670efc391f6533b64"},"previous_names":[],"tags_count":89,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashthornton%2Fasscroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashthornton%2Fasscroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashthornton%2Fasscroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashthornton%2Fasscroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ashthornton","download_url":"https://codeload.github.com/ashthornton/asscroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224949828,"owners_count":17397241,"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":["scroll","smooth-scroll","smooth-scroll-plugins","smooth-scrolling","smoothscroll"],"created_at":"2024-08-03T13:01:10.542Z","updated_at":"2024-11-16T17:31:09.246Z","avatar_url":"https://github.com/ashthornton.png","language":"JavaScript","funding_links":[],"categories":["Scroll"],"sub_categories":["Other"],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/ashthornton/asscroll/master/docs/banner.jpg\"\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@ashthornton/asscroll\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@ashthornton/asscroll?color=%23F7894A\" alt=\"NPM Version\"\u003e\u003c/a\u003e\n    \u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/minzip/@ashthornton/asscroll?color=%23F7894A\"\u003e\n    \u003ca href=\"https://www.jsdelivr.com/package/npm/@ashthornton/asscroll\"\u003e\u003cimg alt=\"jsDelivr hits (npm)\" src=\"https://img.shields.io/jsdelivr/npm/hm/@ashthornton/asscroll?color=%23F7894A\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003e\u003cstrong\u003e⚠️ This repo is no longer actively maintained! ASScroll is still functional but I would recommend switching to \u003ca href=\"https://github.com/studio-freight/lenis\"\u003eLenis\u003c/a\u003e as an alternative if you are looking for regular updates and support.\u003c/strong\u003e\u003c/h3\u003e\n\n---\n\n\u003ch3 align=\"center\"\u003e\u003cstrong\u003eASScroll is a Javascript hybrid smooth scroll setup that combines the\u003cbr\u003eperformance gains of virtual scroll with the reliability of native scroll.\u003c/strong\u003e\u003c/h3\u003e\n\n\u003cp align=\"center\" style=\"padding: 0 15%\"\u003eThis setup aims to be a lightweight solution that provides a consistent smooth scrolling experience across all platforms, devices and hardware.\u003c/p\u003e\n\n---\n\n#### Advantages over pure virtual scroll:\n- Accessible and keyboard friendly (without overriding the browser's native scroll)\n- No special cases to cater for when handling manual key detection (i.e. pressing space in a form input)\n- Doesn't stop working when hovering over an iframe\n- Handles hardware that doesn't fire the 'wheel' event i.e. Windows trackpads in Legacy Edge\n- No lag between DOM and WebGL elements on mobile, whilst retaining native inertia scroll\n\n#### Other Features:\n- Horizontal scroll\n- Custom scroll bar\n- Use your own external RAF loop and resize events\n- Consistent lerp speeds on high refresh rate displays\n\n_No animation features are included as there are other libraries that can be used with ASScroll. GreenSock's [ScrollTrigger](https://greensock.com/scrolltrigger/) is a great example and a demo is included below_\n\nDemos\n================\n- [Zero Config Demo](https://codepen.io/ashthornton/pen/pobJRQX?editors=1010)\n- [Options Demo](https://codepen.io/ashthornton/pen/YzWXZqL?editors=1010)\n- [Using GSAP's ScrollTrigger with ASScroll](https://codepen.io/ashthornton/pen/PoZRwPW)\n- [Using PJAX Navigation (Highway) with ASScroll](https://codepen.io/ashthornton/project/editor/AypMLG)\n- [Touch-friendly DOM/WebGL Sync](https://codepen.io/ashthornton/pen/YzZzaVK)\n\n### Sites using ASScroll\n- [CLOU Architects](https://www.clouarchitects.com/)\n- [Lewa House](https://lewahouse.com/)\n- [Eder Anaya](https://ederanaya.me/)\n- [FanFan](https://fanfan.fan/)\n- [Havoc](https://www.havoc.co/)\n- [Shape Studio](https://shapestudio.co.uk/)\n\nTable of contents\n=================\n\u003c!--ts--\u003e\n   * [Install](#install)\n   * [Zero Config Setup](#zero-config-setup)\n   * [API](#asscroll)\n   * [Custom Scrollbar](#custom-scrollbar)\n   * [External RAF Usage](#usage-with-external-requestanimationframe)\n   * [External Resize Usage](#usage-with-external-window-resize)\n   * [Touch Devices](#touch-devices)\n   * [Changelog](#changelog)\n\u003c!--te--\u003e\n\n---\n\n\n# Install\n`npm i --save @ashthornton/asscroll` or `yarn add @ashthornton/asscroll`\n\nAlso available via [JSDelivr CDN](https://www.jsdelivr.com/package/npm/@ashthornton/asscroll) which you can then include with a `\u003cscript\u003e` tag.\n\n# Zero Config Setup\n\n1. Add the attribute `asscroll-container` to the parent element of the content to be smooth scrolled. By default, the first child found within will be scrolled. Both of these selectors be changed in the options.\n\n```html\n\u003cbody\u003e\n    \u003cdiv asscroll-container\u003e\n        \u003cdiv\u003e\u003c!-- The Y translation will be applied to this element --\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n```\n\n2. Import and initialise in Javascript\n\n```js\nimport ASScroll from '@ashthornton/asscroll'\n\nconst asscroll = new ASScroll()\n\nwindow.addEventListener('load', () =\u003e {\n    asscroll.enable()\n})\n```\n\n---\n\n\u003ca name=\"ASScroll\"\u003e\u003c/a\u003e\n\n# ASScroll\nAsh's Smooth Scroll 🍑\n\n\n* [ASScroll](#ASScroll)\n    * [new ASScroll([parameters])](#new_ASScroll_new)\n    * [.targetPos](#ASScroll+targetPos) ⇒ \u003ccode\u003enumber\u003c/code\u003e\n    * [.currentPos](#ASScroll+currentPos) ⇒ \u003ccode\u003enumber\u003c/code\u003e\n    * [.maxScroll](#ASScroll+maxScroll) ⇒ \u003ccode\u003enumber\u003c/code\u003e\n    * [.containerElement](#ASScroll+containerElement) ⇒ \u003ccode\u003eHTMLElement\u003c/code\u003e\n    * [.scrollElements](#ASScroll+scrollElements) ⇒ \u003ccode\u003eArray\u003c/code\u003e\n    * [.isHorizontal](#ASScroll+isHorizontal) ⇒ \u003ccode\u003eboolean\u003c/code\u003e\n    * [.isScrollJacking](#ASScroll+isScrollJacking) ⇒ \u003ccode\u003eboolean\u003c/code\u003e\n    * ~~[.scrollPos](#ASScroll+scrollPos)~~\n    * ~~[.smoothScrollPos](#ASScroll+smoothScrollPos)~~\n    * [.enable([parameters])](#ASScroll+enable)\n    * [.disable([parameters])](#ASScroll+disable)\n    * [.update()](#ASScroll+update)\n    * [.resize([parameters])](#ASScroll+resize)\n    * [.on(eventName, callback)](#ASScroll+on)\n    * [.off(eventName, callback)](#ASScroll+off)\n    * [.scrollTo(targetPos, [emitEvent])](#ASScroll+scrollTo)\n    * ~~[.onRaf()](#ASScroll+onRaf)~~\n    * ~~[.onResize()](#ASScroll+onResize)~~\n\n\u003ca name=\"new_ASScroll_new\"\u003e\u003c/a\u003e\n\n## new ASScroll([parameters])\nCreates an ASScroll instance\n\n\n| Param | Type | Default | Description |\n| --- | --- | --- | --- |\n| [parameters] | \u003ccode\u003eobject\u003c/code\u003e |  |  |\n| [parameters.containerElement] | \u003ccode\u003estring\u003c/code\u003e \\| \u003ccode\u003eHTMLElement\u003c/code\u003e | \u003ccode\u003e\u0026quot;[asscroll-container]\u0026quot;\u003c/code\u003e | The selector string for the outer container element, or the element itself |\n| [parameters.scrollElements] | \u003ccode\u003estring\u003c/code\u003e \\| \u003ccode\u003eHTMLElement\u003c/code\u003e \\| \u003ccode\u003eNodeList\u003c/code\u003e | \u003ccode\u003e\u0026quot;[asscroll]\u0026quot;\u003c/code\u003e | The selector string for the elements to scroll, or the elements themselves |\n| [parameters.ease] | \u003ccode\u003enumber\u003c/code\u003e | \u003ccode\u003e0.075\u003c/code\u003e | The ease amount for the transform lerp |\n| [parameters.touchEase] | \u003ccode\u003enumber\u003c/code\u003e | \u003ccode\u003e1\u003c/code\u003e | The ease amount for the transform lerp on touch devices |\n| [parameters.touchScrollType] | \u003ccode\u003estring\u003c/code\u003e | \u003ccode\u003e\u0026quot;none\u0026quot;\u003c/code\u003e | Set the scrolling method on touch devices. Other options are 'transform' and 'scrollTop'. See the [Touch Devices](#touch-devices) section for more info |\n| [parameters.lockIOSBrowserUI] | \u003ccode\u003eboolean\u003c/code\u003e | \u003ccode\u003efalse\u003c/code\u003e | When using an iOS device and touchScrollType is 'transform', this will change the setup to prevent the browser UI from showing/hiding to stop resize events on scroll. |\n| [parameters.scrollbarEl] | \u003ccode\u003estring\u003c/code\u003e | \u003ccode\u003e\u0026quot;.asscrollbar\u0026quot;\u003c/code\u003e | The selector string for the custom scrollbar element |\n| [parameters.scrollbarHandleEl] | \u003ccode\u003estring\u003c/code\u003e | \u003ccode\u003e\u0026quot;.asscrollbar__handle\u0026quot;\u003c/code\u003e | The selector string for the custom scrollbar handle element |\n| [parameters.customScrollbar] | \u003ccode\u003eboolean\u003c/code\u003e | \u003ccode\u003etrue\u003c/code\u003e | Toggle the custom scrollbar |\n| [parameters.scrollbarStyles] | \u003ccode\u003eboolean\u003c/code\u003e | \u003ccode\u003etrue\u003c/code\u003e | Include the scrollbar CSS via Javascript |\n| [parameters.disableNativeScrollbar] | \u003ccode\u003eboolean\u003c/code\u003e | \u003ccode\u003etrue\u003c/code\u003e | Disable the native browser scrollbar |\n| [parameters.disableRaf] | \u003ccode\u003eboolean\u003c/code\u003e | \u003ccode\u003efalse\u003c/code\u003e | Disable internal requestAnimationFrame loop in order to use an external one |\n| [parameters.disableResize] | \u003ccode\u003eboolean\u003c/code\u003e | \u003ccode\u003efalse\u003c/code\u003e | Disable internal resize event on the window in order to use an external one |\n| [parameters.limitLerpRate] | \u003ccode\u003eboolean\u003c/code\u003e | \u003ccode\u003etrue\u003c/code\u003e | Match lerp speed on \u003e60Hz displays to that of a 60Hz display |\n| [parameters.blockScrollClass] | \u003ccode\u003estring\u003c/code\u003e | \u003ccode\u003e\u0026quot;.asscroll-block\u0026quot;\u003c/code\u003e | The class to add to elements that should block ASScroll when hovered |\n\n\u003ca name=\"ASScroll+targetPos\"\u003e\u003c/a\u003e\n\n## asscroll.targetPos ⇒ \u003ccode\u003enumber\u003c/code\u003e\nReturns the target scroll position.\n\n**Returns**: \u003ccode\u003enumber\u003c/code\u003e - Target scroll position  \n\u003ca name=\"ASScroll+currentPos\"\u003e\u003c/a\u003e\n\n## asscroll.currentPos ⇒ \u003ccode\u003enumber\u003c/code\u003e\nGets or sets the current scroll position.\n\n**Returns**: \u003ccode\u003enumber\u003c/code\u003e - Current scroll position  \n\n| Param | Type | Description |\n| --- | --- | --- |\n| scrollPos | \u003ccode\u003enumber\u003c/code\u003e | The desired scroll position |\n\n**Example** *(Sets the scroll position to 200, bypassing any lerps)*  \n```js\nasscroll.currentPos = 200\n```\n\u003ca name=\"ASScroll+maxScroll\"\u003e\u003c/a\u003e\n\n## asscroll.maxScroll ⇒ \u003ccode\u003enumber\u003c/code\u003e\nReturns the maximum scroll height of the page.\n\n**Returns**: \u003ccode\u003enumber\u003c/code\u003e - Maxmium scroll height  \n\u003ca name=\"ASScroll+containerElement\"\u003e\u003c/a\u003e\n\n## asscroll.containerElement ⇒ \u003ccode\u003eHTMLElement\u003c/code\u003e\nReturns the outer element that ASScroll is attached to.\n\n**Returns**: \u003ccode\u003eHTMLElement\u003c/code\u003e - The outer element  \n\u003ca name=\"ASScroll+scrollElements\"\u003e\u003c/a\u003e\n\n## asscroll.scrollElements ⇒ \u003ccode\u003eArray\u003c/code\u003e\nReturns the the element(s) that ASScroll is scrolling.\n\n**Returns**: \u003ccode\u003eArray\u003c/code\u003e - An array of elements ASScroll is scrolling  \n\u003ca name=\"ASScroll+isHorizontal\"\u003e\u003c/a\u003e\n\n## asscroll.isHorizontal ⇒ \u003ccode\u003eboolean\u003c/code\u003e\nReturns whether or not ASScroll is in horizontal scroll mode\n\n**Returns**: \u003ccode\u003eboolean\u003c/code\u003e - The status of horizontal scroll  \n\u003ca name=\"ASScroll+isScrollJacking\"\u003e\u003c/a\u003e\n\n## asscroll.isScrollJacking ⇒ \u003ccode\u003eboolean\u003c/code\u003e\nReturns whether or not ASScroll is actively transforming the page element(s). For example, would return false if running on a touch device and touchScrollType !== 'transform', or if ASScroll was currently disabled via the .disable() method.\n\n**Returns**: \u003ccode\u003eboolean\u003c/code\u003e - The status of actively controlling the page scroll  \n\u003ca name=\"ASScroll+scrollPos\"\u003e\u003c/a\u003e\n\n## ~~asscroll.scrollPos~~\n***Deprecated***\n\n**See**: [targetPos](#ASScroll+targetPos)  \n\u003ca name=\"ASScroll+smoothScrollPos\"\u003e\u003c/a\u003e\n\n## ~~asscroll.smoothScrollPos~~\n***Deprecated***\n\n**See**: [currentPos](#ASScroll+currentPos)  \n\u003ca name=\"ASScroll+enable\"\u003e\u003c/a\u003e\n\n## asscroll.enable([parameters])\nEnable ASScroll.\n\n\n| Param | Type | Default | Description |\n| --- | --- | --- | --- |\n| [parameters] | \u003ccode\u003eobject\u003c/code\u003e |  |  |\n| [parameters.newScrollElements] | \u003ccode\u003eboolean\u003c/code\u003e \\| \u003ccode\u003eNodeList\u003c/code\u003e \\| \u003ccode\u003eHTMLElement\u003c/code\u003e | \u003ccode\u003efalse\u003c/code\u003e | Specify the new element(s) that should be scrolled |\n| [parameters.reset] | \u003ccode\u003eboolean\u003c/code\u003e | \u003ccode\u003efalse\u003c/code\u003e | Reset the scroll position to 0 |\n| [parameters.restore] | \u003ccode\u003eboolean\u003c/code\u003e | \u003ccode\u003efalse\u003c/code\u003e | Restore the scroll position to where it was when disable() was called |\n| [parameters.horizontalScroll] | \u003ccode\u003eboolean\u003c/code\u003e | \u003ccode\u003efalse\u003c/code\u003e | Toggle horizontal scrolling |\n\n**Example** *(Enables ASScroll on the \u0026#x27;.page\u0026#x27; element and resets the scroll position to 0)*  \n```js\nasscroll.enable({ newScrollElements: document.querySelector('.page'), reset: true })\n```\n**Example** *(Enables ASScroll and restores to the previous position before ASScroll.disable() was called)*  \n```js\nasscroll.enable({ restore: true })\n```\n\u003ca name=\"ASScroll+disable\"\u003e\u003c/a\u003e\n\n## asscroll.disable([parameters])\nDisable ASScroll.\n\n\n| Param | Type | Default | Description |\n| --- | --- | --- | --- |\n| [parameters] | \u003ccode\u003eobject\u003c/code\u003e |  |  |\n| [parameters.inputOnly] | \u003ccode\u003eboolean\u003c/code\u003e | \u003ccode\u003efalse\u003c/code\u003e | Only disable the ability to manually scroll (still allow transforms) |\n\n**Example** *(Disables the ability to manually scroll whilst still allowing position updates to be made via asscroll.currentPos, for example)*  \n```js\nasscroll.disable({ inputOnly: true })\n```\n\u003ca name=\"ASScroll+update\"\u003e\u003c/a\u003e\n\n## asscroll.update()\nCall the internal animation frame request callback.\n\n\u003ca name=\"ASScroll+resize\"\u003e\u003c/a\u003e\n\n## asscroll.resize([parameters])\nCall the internal resize callback.\n\n\n| Param | Type | Description |\n| --- | --- | --- |\n| [parameters] | \u003ccode\u003eobject\u003c/code\u003e |  |\n| [parameters.width] | \u003ccode\u003enumber\u003c/code\u003e | Window width |\n| [parameters.height] | \u003ccode\u003enumber\u003c/code\u003e | Window height |\n\n\u003ca name=\"ASScroll+on\"\u003e\u003c/a\u003e\n\n## asscroll.on(eventName, callback)\nAdd an event listener.\n\n\n| Param | Type | Description |\n| --- | --- | --- |\n| eventName | \u003ccode\u003estring\u003c/code\u003e | Name of the event you wish to listen for |\n| callback | \u003ccode\u003efunction\u003c/code\u003e | Callback function that should be executed when the event fires |\n\n**Example** *(Logs out the scroll position when the \u0026#x27;scroll\u0026#x27; event is fired)*  \n```js\nasscroll.on('scroll', scrollPos =\u003e console.log(scrollPos))\n```\n**Example** *(Returns the target scroll position and current scroll position during the internal update loop)*  \n```js\nasscroll.on('update', ({ targetPos, currentPos }) =\u003e console.log(targetPos, currentPos))\n```\n**Example** *(Fires when the lerped scroll position has reached the target position)*  \n```js\nasscroll.on('scrollEnd', scrollPos =\u003e console.log(scrollPos))\n```\n\u003ca name=\"ASScroll+off\"\u003e\u003c/a\u003e\n\n## asscroll.off(eventName, callback)\nRemove an event listener.\n\n\n| Param | Type | Description |\n| --- | --- | --- |\n| eventName | \u003ccode\u003estring\u003c/code\u003e | Name of the event |\n| callback | \u003ccode\u003efunction\u003c/code\u003e | Callback function |\n\n\u003ca name=\"ASScroll+scrollTo\"\u003e\u003c/a\u003e\n\n## asscroll.scrollTo(targetPos, [emitEvent])\nScroll to a given position on the page.\n\n\n| Param | Type | Default | Description |\n| --- | --- | --- | --- |\n| targetPos | \u003ccode\u003enumber\u003c/code\u003e |  | Target scroll position |\n| [emitEvent] | \u003ccode\u003eboolean\u003c/code\u003e | \u003ccode\u003etrue\u003c/code\u003e | Whether to emit the external scroll events or not |\n\n\u003ca name=\"ASScroll+onRaf\"\u003e\u003c/a\u003e\n\n## ~~asscroll.onRaf()~~\n***Deprecated***\n\n**See**: [update](#ASScroll+update)  \n\u003ca name=\"ASScroll+onResize\"\u003e\u003c/a\u003e\n\n## ~~asscroll.onResize()~~\n***Deprecated***\n\n**See**: [resize](#ASScroll+resize)  \n\n---\n\n## Custom Scrollbar\n\nWhen `customScrollbar` is enabled in the options, a default set of styles will get added to the page that match the following HTML:\n\n```HTML\n\u003cdiv class=\"asscrollbar\"\u003e\u003cdiv class=\"asscrollbar__handle\"\u003e\u003cdiv\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\n```\n\nThis HTML will get added to your page automatically if you don't add it yourself.\n\nYou can change the classes that are used by changing the `scrollbarEl` and `scrollbarHandleEl` options.\n\nYou can use your own styles by setting the `scrollbarStyles` option to false.\n\n---\n\n⚠ **Note**: These styles are added via JS so will only be applied after JS has loaded. This may cause the native scrollbar to show for a moment before the styles are added resulting in a jump of the page.\n\nYou can include the styles necessary to hide the native scrollbar in your CSS by copy and pasting the contents of `/css/index.css` or simply by importing them into your CSS setup. For example:\n\n```css\n@import '~@ashthornton/asscroll/css'\n```\n\n## Usage with external requestAnimationFrame\nMultiple requestAnimationFrame loops causes a significant impact on performance, so ASScroll provides the option to disable its internal rAF loop in order for you to update it yourself externally.\n\n```Javascript\nconst asscroll = new ASScroll({\n    disableRaf: true\n})\n\n// Regular RAF loop\nrequestAnimationFrame(onRaf)\nfunction onRaf() {\n    asscroll.update()\n    requestAnimationFrame(onRaf)\n}\n\n// Or use with GSAP's internal RAF\ngsap.ticker.add(asscroll.update)\n```\n\n## Usage with external window resize\nYou may already have a window resize listener in your project where you get the window size for other components. Rather than let ASScroll access these window properties during its internal resize event, which causes extra browser calculations, you can pass your own values.\n\n```Javascript\nconst asscroll = new ASScroll({\n    disableResize: true\n})\n\nwindow.addEventListener('resize', () =\u003e {\n    // trigger other resize logic\n    const width = window.innerWidth\n    const height = window.innerHeight\n    asscroll.resize({ width, height })\n})\n```\n\n## Touch Devices\n\nASScroll provides three options for handling itself on touch devices via the `touchScrollType` option:\n- `'none'`: Disabled completely, falling back to native scroll whilst still providing scroll position properties\n- `'transform'`: Continue to transform the scroll elements with an ease setting specifically to touch devices\n- `'scrollTop'`: Utilise the `scrollTop` value of the container element when used in conjunction with CSS that prevents resizes and browser UI from toggling\n\nThe `scrollTop` option is primarily used for syncing WebGL content to the scroll position on mobile, without overriding the native inertia scroll. Some CSS will be injected automatically when this option is enabled. This CSS can be found [here](https://github.com/ashthornton/asscroll/blob/master/css/scrollTop.css).\n\n`touchScrollType: transform` will also achieve DOM and WebGL content sync but is more expensive.\n\n## Changelog\n[View Changelog](https://github.com/ashthornton/asscroll/blob/master/CHANGELOG.md)\n\n[![Verified on Openbase](https://badges.openbase.com/js/verified/@ashthornton/asscroll.svg?style=openbase\u0026token=WmQF8PcdmBheXMjTKPy59HRexmMzyckLHugup8l88mU=)](https://openbase.com/js/@ashthornton/asscroll?utm_source=embedded\u0026amp;utm_medium=badge\u0026amp;utm_campaign=rate-badge)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashthornton%2Fasscroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fashthornton%2Fasscroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashthornton%2Fasscroll/lists"}