A simple Vue component that allows both fullscreen and horizontal scroll

by Vue.js Examples

Vue Scroll Snap

A super simple Vue component that allows both fullscreen and horizontal scroll snapping.

View Demo View Github

Installation

npm install vue-scroll-snap --save

Usage

There are four ways of using Vue Scroll Snap. They are described below. For more a more detailed description, see the example directory.

Vertical

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

<script>
  import VueScrollSnap from "vue-scroll-snap";

  export default {
    components: {VueScrollSnap},
  };
</script>

<style>

  .item {
    /* Set the minimum height of the items to be the same as the height of the scroll-snap-container.*/
    min-height: 500px;
  }

  .scroll-snap-container {
    height: 500px;
    width: 500px;
  }
</style>

Horizontal

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

<script>...</script>

<style>

  .item {
    /* Set the minimum width of the items to be the same as the width of the scroll-snap-container.*/
    min-width: 500px;
  }

  .scroll-snap-container {...}
</style>

Fullscreen Vertical

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

<script>...</script>
<style>/* No styling required. */</style>

Fullscreen Horizontal

<template>
  <vue-scroll-snap :fullscreen="true" :horizontal="true">
    ...
  </vue-scroll-snap>
</template>

<script>...</script>
<style>/* No styling required. */</style>

Props

Optional Props

Prop Type Default
fullscreen Boolean false
horizontal Boolean false

GitHub