❤
npm
Sign UpSign In

one-page-scroll
TypeScript icon, indicating that this package has built-in type declarations

0.2.5 • Public • Published

one-page-scroll

tag license size code style

An easy javascipt library used to create the fullscreen scroll pages.

It has full support the mouse, keyboard and touch event.

Demo

Usage

Just add the script file before end of body.

<body>
  <section name="page1"></section>
  <section name="page2"></section>
  <section></section>
  <section name="page4"></section>
  ...
  <script src="https://unpkg.com/one-page-scroll/one-page-scroll.min.js"></script> 
</body>

Then call it new onePageScroll({options}) .

document.addEventListener('DOMContentLoaded', function() {
  var app = new onePageScroll({
    el: document.querySelectorAll('section');
  })
})

That's all.

You can .next(), .prev() and .goto(n) to control page by script.

While page changed, the element will be dispatched a event inview or outview.

So you can do any thing when users or you change the page like this.

el.addEventListener('inview', function(e) {
  // do something
})

Options

one-page-scroll has 4 options.

{
  el, // NodeList - the page elements, required
  time, // Number - the animation time(ms), default: 600
  easing, // String - CSS animation easing, default: ease-out
  loop, // Boolean - loop pages(only the last page to the first page), default: false
  throttling // number - the time you want to invoke user to scroll a page at most once
}

You can change the last 3 options any times. just app.easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'

Browser Support

one-page-scroll support the lastest Chrome, Firefox, Edge and Safari.

Add polyfill before one-page-scroll to support IE > 9.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Array.prototype.findIndex,Array.prototype.includes,Array.prototype.forEach,CustomEvent"></script>

Using Native ES Modules

<script type="module">
  import OnePageScroll from '//unpkg.com/one-page-scroll/one-page-scroll.esm.js'
  const app = new OnePageScroll(options)
</script>

Build

$ npm install
$ npm run build

Author

huihuimoe ©, Released under the MIT License.

Buy Me a Coffee

Readme

Keywords

Package Sidebar

Install

npm i one-page-scroll

Repository

github.com/huihuimoe/one-page-scroll

Homepage

github.com/huihuimoe/one-page-scroll#readme

Weekly Downloads

27

Version

0.2.5

License

MIT

Unpacked Size

50.6 kB

Total Files

13

Last publish

Collaborators

  • huihuimoe
Try on RunKit
Report malware