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.
| Name | Description | Link |
|---|---|---|
| Basic | Snaps to the nearest section | Try it on CodePen |
- Works in all modern browsers
- Zero dependencies
- CommonJS and AMD support
- Performance-optimized
- Fluid animations
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
requestAnimationFramefor fluid animations- Size-calculations will be performed at start and after a defined scroll-delay. All data gets cached to avoid unnecessary recalculations.
We recommend to install scrollSnap using Bower or npm.
bower install scrollSnap
npm install scrollsnap
scrollSnap dependents on the following browser APIs:
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.
Simply include the JS-file at the end of your body.
<script src="dist/scrollSnap.min.js"></script>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
})