Scrollio

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Samsung	Opera
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Scrollio is a slim yet extensible smooth scrolling solution.

It aims to solve one thing, and one thing only:

creating a jank-free smooth scroll which can be controlled by either one of the provided easing functions, or by a user-provided one.

Why is it headless?

Scrollio exposes its entire internal API to be used in your own project. It comes with a usable example function in order to provide a possible solution, yet the use of it is not mandatory.

Getting Started

# Get scrollio from npm
npm i scrollio-js

# Import either Scrollio or one of its subset functions
import {Scrollio} from "scrollio-js";

# Get started with an example configuration

const scrollio = new Scrollio({
  scrollElement: elementRef,
  duration: 800,
  easingFunction: "easeInOutQuad"
});

# Scroll somewhere!
scrollio.scrollTo(250);

Documentation

Please refer to API.md

Prerequisites

Make sure your target browsers support es6, otherwise:

# Manually clone the project
git clone https://github.com/silicakes/scrollio.git

# Change tsconfig.jsons' target entry
-      "target": "ES6",
+      "target": "ES5",

# build the project
npm run build

#use main.js with your solution.

Built With

• Typescript - TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
• Webpack - webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Contributing

Just send a PR, no fancy rules here.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Michael Katz - Initial work - silicakes

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

Big thanks for yukulele and gre whose gists inspired parts of this solution.

TODOS

• Demos: Comming soon! I promise()!
• Support x position scrolling (breaking change)
• Add an onScroll event (currently polyfillable with scrollElement.addEventListener("scroll", () => {...})), consider using ReadableStream (similar to the fetch API)
• Add testing