One Page Scroll With Auto Snapping – Vue Scroll Snap

Description:

Scroll Snap is a Vue.js app to create a one-page scroll website or single page web app with scroll snapping functionality.

The page will automatically snap to the next or previous page sections while scrolling through the page.

How to use it:

1. Import and register the component.

import VueScrollSnap from "vue-scroll-snap";
export default {
  components: {VueScrollSnap},
};

2. Create the component in your app template and insert page sections into the document.

<template>
  <vue-scroll-snap>
    <div class="item"></div>
    <div class="item"></div>
    ...
  </vue-scroll-snap>
</template>

3. Enable fullscreen page scrolling.

<template>
  <vue-scroll-snap :fullscreen="true">
    <div class="item"></div>
    <div class="item"></div>
    ...
  </vue-scroll-snap>
</template>

4. Enable horizontal page scrolling.

<template>
  <vue-scroll-snap :horizontal="true">
    <div class="item"></div>
    <div class="item"></div>
    ...
  </vue-scroll-snap>
</template>

Download Details:

Author: angelomelonas

Live Demo: https://angelomelonas.github.io/vue-scroll-snap/#/

Download Link: https://github.com/angelomelonas/vue-scroll-snap/archive/master.zip

Official Website: https://github.com/angelomelonas/vue-scroll-snap

Last Update: November 5, 2019

Install:

# NPM
$ npm install vue-scroll-snap --save

You Might Be Interested In:

Add Comment