plain-scroll

Simple and minimal size scroll library

Usage no npm install needed!

<script type="module">
  import plainScroll from 'https://cdn.skypack.dev/plain-scroll';
</script>

README

Simple and lightweight size scroll library.

Installing

npm install plain-scroll

Usage

PlainScroll is simple to usage. If you are using a module bundler, insert the following code into your project.

import PlainScroll from 'plain-scroll';

Please use plain-scroll.min.js when using with script tag.

<script src="plain-scroll.min.js"></script>

Next, create a instance.

new PlainScroll();

// or set option
new PlainScroll({
  trigger: '.plain-scroll',
  duration: 1000,
  easing: 'easeOut'
  onScrollStart: () => console.log('start'),
  onScrollEnd: () => console.log('end')
});

Finally, attach the trigger name to anchor tag, prepare the element you want to scroll.

<a href="#to" class="plain-scroll">
<div id="to"></div>

Option

You can set options at the same time you create an instance.

trigger

Class name for starting scrolling, set to anchor tag. Default set is '.plain-scroll'.

duration

It is time to scroll to the destination. Default set is 1000 milliseconds.

easing

Add inertia to the scroll. You can set either for 'linear', 'easeIn', 'easeOut', 'easeInOut'. Default set is 'easeOut'.

callback

You can run any function at start and end of scroll.

Support Borwser

Support for stable version in the modern browsers and Internet Explorer 11.

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer 11

License

MIT @darumock