npm bundle size

ASScroll is a Javascript hybrid smooth scroll setup that combines the
performance gains of virtual scroll with the reliability of native scroll.

This setup aims to be a lightweight solution that provides a consistent smooth scrolling experience across all platforms, devices and hardware.

--- #### Advantages over pure virtual scroll: - Accessible and keyboard friendly (without overriding the browser's native scroll) - No special cases to cater for when handling manual key detection (i.e. pressing space in a form input) - Doesn't stop working when hovering over an iframe - Handles hardware that doesn't fire the 'wheel' event i.e. Windows trackpads in Legacy Edge - No lag between DOM and WebGL elements on mobile, whilst retaining native inertia scroll #### Other Features: - Horizontal scroll - Custom scroll bar - Use your own external RAF loop and resize events - Consistent lerp speeds on high refresh rate displays _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_ Demos ================ - [Zero Config Demo](https://codepen.io/ashthornton/pen/pobJRQX?editors=1010) - [Options Demo](https://codepen.io/ashthornton/pen/YzWXZqL?editors=1010) - [Using GSAP's ScrollTrigger with ASScroll](https://codepen.io/ashthornton/pen/PoZRwPW) - [Using PJAX Navigation (Highway) with ASScroll](https://codepen.io/ashthornton/project/editor/AypMLG) - [Touch-friendly DOM/WebGL Sync](https://codepen.io/ashthornton/pen/YzZzaVK) ### Sites using ASScroll - [CLOU Architects](https://www.clouarchitects.com/) - [Lewa House](https://lewahouse.com/) - [Eder Anaya](https://ederanaya.me/) - [FanFan](https://fanfan.fan/) - [Havoc](https://www.havoc.co/) - [Shape Studio](https://shapestudio.co.uk/) Table of contents ================= * [Install](#install) * [Zero Config Setup](#zero-config-setup) * [API](#asscroll) * [Custom Scrollbar](#custom-scrollbar) * [External RAF Usage](#usage-with-external-requestanimationframe) * [External Resize Usage](#usage-with-external-window-resize) * [Touch Devices](#touch-devices) * [Changelog](#changelog) --- # Install `npm i --save @ashthornton/asscroll` or `yarn add @ashthornton/asscroll` Also available via [JSDelivr CDN](https://www.jsdelivr.com/package/npm/@ashthornton/asscroll) which you can then include with a `

	Stars	Issues	Version	Updated	Created
@ashthornton/asscroll	948	18	2.0.11	2 years ago	4 years ago
parallax-js	16,411	9	3.1.0	7 years ago	7 years ago
parallax-scroll			0.3.0	8 years ago	9 years ago
react-parallax	828	13	3.5.1	2 years ago	9 years ago
react-spring	27,431	115	9.7.3	7 months ago	6 years ago

@ashthornton/asscroll vs parallax-js vs parallax-scroll vs react-parallax vs react-spring

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past