This package has been deprecated

Author message:

Not maintained anymore

scrollSnap

Scroll, stop, snap.

scrollSnap provides a hassle-free alternative to scroll-hijacking, allowing a section-based navigation without harming the user-experience. It's written in Vanilla JS and has zero dependencies.

Tested with the latest versions of Mozilla Firefox, Apple Safari, Google Chrome, Microsoft Internet Explorer (10+) and Opera.

Demos

Name	Description	Link
Basic	Snaps to the nearest section	Try it on CodePen

Features

• Works in all modern browsers
• Zero dependencies
• CommonJS and AMD support
• Performance-optimized
• Fluid animations

Performance

scrollSnap has been developed with performance in mind. It uses modern technologies to get the most of your browser:

• Works without additional libraries to keep your site slim
• Written in ES2015 and transformed to ES5 using Babel
• requestAnimationFrame for fluid animations
• Size-calculations will be performed at start and after a defined scroll-delay. All data gets cached to avoid unnecessary recalculations.

Installation

We recommend to install scrollSnap using Bower or npm.

bower install scrollSnap
npm install scrollsnap

Requirements

scrollSnap dependents on the following browser APIs:

• requestAnimationFrame

Some of these APIs are capable of being polyfilled in older browser. Check the linked resources above to determine if you must polyfill to achieve your desired level of browser support.

Include

Simply include the JS-file at the end of your body.

<script src="dist/scrollSnap.min.js"></script>

Options

List of options you can pass to the scrollSnap.init-function:

scrollSnap.init({
 
    // NodeList of snap-elements (required)
    // scrollSnap always snaps to the nearest element
    elements: document.querySelectorAll('section'),
    
    // Integer - Set a minimum window-size (required)
    // scrollSnap will be deactivated when the window is smaller than the given dimensions
    minWidth: 600,
    minHeight: 400,
    
    // Boolean - Deactivate scrollSnap on mobile devices (optional)
    detectMobile: true,
    
    // Boolean - Keyboard-navigation (optional)
    keyboard: true,
    
    // Integer - Snap-animation-speed (optional)
    // Higher = slower
    duration: 20,
    
    // Function - Set a custom timing-function for the snap-animation (optional)
    timing: scrollSnap._timing
 
})