Vue Component Fullscreen Horizontal Scroll Snapping Library

Vue Scroll Snap is a super simple Vue component that allows full-screen and landscape scroll capture.

full page scroll css, css scroll snap, snap scroll jquery, scroll snap type, scroll snap slider, scroll snap alternative

Table of Contents

How to make use of it:

Install and download:

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

1. Import and register the component.

import VueScrollSnap from "vue-scroll-snap";

export default {
  components: {VueScrollSnap},
};

2. Create the component in your application 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 full-screen 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>

Prop	Type	Default
`fullscreen`	Boolean	`false`
`horizontal`	Boolean	`false`

One Page Scroll With Auto Snapping, Vue Scroll Snap Plugin/Github

Official Website(angelomelonas): Click Here

This superior jQuery/javascript plugin is developed by angelomelonas. For extra Advanced Usages, please go to the official website.