This is flipflop.js

A tiny vanilla JavaScript library with no dependancies

It enables scrolling 'page by page'

Try scrolling down, or hit the down arrow, or click the navigation on the right hand side

GitHub: https://github.com/bugbit-io/flipflop

NPM: https://www.npmjs.com/package/flipflop-scroll

This demo uses semantic 'section' elements to seperate pages

The main container is document.body by default, change this at your peril.

You can also set a preferred section tag:

flipFlop({
container: document.getElementById('someContainer'),
sections: document.getElementsByClassName('yourClassHere')
})

To use the dots you just add a div with ID 'flip_flop_nav'

If you don't like the selector you can change it:

flipFlop({
nav: document.getElementById('yourIdHere')
})

If you only want a certain number of dots you can add them in manually:

<div id="flip_flop_nav">
<div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div>

^ That will give you three

The FlipFloppyness automatically dissapears on mobile < 960px wide.

Or wherever you want:

flipFlop({
disableOnMax: 500 // sets minimum pixel width for FlipFloppyness
})

Be careful on mobile, touch screens aren't very flippy floppy

Thank you for making your project more Flippy Floppy!