Create Touch-enabled Fullscreen Scrolling Webpage – one-page-scroll

Preview:

Description:

A lightweight, mobile-compatible one page scroll plugin to scroll through pages via mouse wheel, keyboard arrows and touch events.

How to use it:

1. Download and import the one-page-scroll.

<!-- ES5 -->
<script src="./one-page-scroll.min.js"></script>
<!-- ES6 -->
<script type="module">
  import onePageScroll from './one-page-scroll.esm.js'
</script>

2. Insert fullscreen pages into the document.

<section id="s1" name="page1">
  Section 1
</section>
<section id="s2" name="page2">
  Section 2
</section>
<section id="s3" name="page2">
  Section 3
</section>
... more sections here ...

3. Initialize the one-page-scroll on the sections. Done.

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

4. Determine whether to back to the first page when you scroll on the last one.

var app = new onePageScroll({ 
    loop: true
});

5. Config the duration of the animation. Default: 600ms.

var app = new onePageScroll({ 
    time: 1000
});

6. Apply an easing function to the animation.

var app = new onePageScroll({ 
    easing: 'ease-out'
});

7. Determine the the time you want to invoke user to scroll a page at most once.

var app = new onePageScroll({ 
    throttling: 300
});

8. Fire events when the page is inView and outView.

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

9. Scroll through the pages programmatically.

// next
app.next();
// prev
app.prev();
// go to a specified page
app.goto(n);