One Page Scroll With Auto Snapping - Vue Scroll Snap

Install & Download:

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

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.

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>

05/12/2021

11/28/2020

08/20/2020

08/13/2020