Custom scroll event with inertia/momentum, touch and keyboard compatible.
See this article for the original authors description.
- Support browser and commonjs environments
- Add SSR environment support
- Provide an example usage
yarn add @sichangi/virtual-scroll
Return a new instance of VirtualScroll. See the options below.
const instance = new VirtualScroll(options)Listen to the scroll event using the specified function (fn) and optional context.
instance.on(fn, context)Remove the listener.
instance.off(fn, context)Will remove all events and unbind the DOM listeners.
instance.destroy()Events note:
Each instance will listen only once to any DOM listener.These listener are enabled/disabled automatically. However, it's a good practice to always call destroy() on your VirtualScroll instance, especially if you are working with a SPA.
| name | default | description |
|---|---|---|
| el | window | the target element for mobile touch events |
| mouseMultiplier | 1 | General multiplier for all mousewheel (including Firefox) |
| touchMultiplier | 2 | Mutiply the touch action by this modifier to make scroll faster than finger movement. |
| firefoxMultiplier | 15 | Firefox on Windows needs a boost, since scrolling is very slow. |
| keyStep | 120 | How many pixels to move with each key press. |
| preventTouch | false | If true, automatically call e.preventDefault on touchMove. |
| unpreventTouchClass | vs-touchmove-allowed | Elements with this class won't preventDefault on touchMove. For instance, useful for a scrolling text inside a VirtualScroll-controled element. |
| limitInertia | false | if true, will leverage Lethargy to avoid everlasting scroll events (mostly on Apple Mouse, Trackpad, and free-wheel mouse). |
| passive | undefined | if used, will use passive events declaration for the wheel and touch listeners. Can be true or false. |
| disableUserInput | false | if true, does not listen for scroll events |
MIT.