Skip to content

silicakes/scrollio

Repository files navigation

Scrollio

scrollio version license: MIT

Typescript version npm Version build: passing code style: prettier

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
Samsung
Samsung
Opera
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

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