A Simple Vue Component That Allows Fullscreen and 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 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.

    <div class="item"></div>
    <div class="item"></div>

3. Enable full-screen page scrolling.

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

4. Enable horizontal page scrolling.

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

Optional Props


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

See Demo And Download

Official Website(angelomelonas): Click Here

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

Related Posts


Image Slider With 20 Cool Transitions Component | vue-flux

Vue flux is an image slider developed with Vuejs 2 that comes with 20+ nice transitions out of the box. Included transitions 2D transitions Fade: Fades from…


Simple background Image Parallax Scroll Plugin In jQuery

Background parallax effect is a simple jQuery background image without any library. Uses jQuery’s scroll() function to track the scroll event and applies the exact parallax scroll…


Modular Color Picker Plugin for Bootstrap | BS Colorpicker

Bootstrap Colorpicker is a standard color picker plugin for Bootstrap 4. Colorpicker Plugin for Bootstrap 5/4/3 frameworks that allow you to add a color picker to an…


GDPR Friendly iFrame Manager In Vanilla JS | iframemanager

IframeMananger is a lightweight JavaScript plug-in that helps you to comply with GDPR by completely removing iframes at first and setting a notice related to that service….


Diagonal Thumbnails Carousel Slider | Anime.js

Diagonal Slider is a cool mini carousel made with Anime.js JavaScript library. It takes a bunch of pictures and turns them into a circular user interface where…


Notiflix Notification, Popup Boxes, Loading Indicators, and More in JavaScript Library

Notiflix is the JavaScript library of client-side unblocked notifications, popups, load indicators, and more that makes your web projects so much better. Notiflix is a versatile, highly…