A Simple Vue Component That Allows Both Fullscreen and Horizontal Scroll
Vue Scroll Snap A super simple Vue component that allows both fullscreen and horizontal scroll snapping.
Vue Scroll Snap
A super simple Vue component that allows both fullscreen and horizontal scroll snapping.
Showcase
Check out the live demo to see the scroll snapping in action.
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 |
Download Details:
Author: angelomelonas
Source Code: https://github.com/angelomelonas/vue-scroll-snap
Suggest:
☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework
☞ Learn Vue.js from scratch 2018
☞ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!
☞ Vue.js Tutorial: Zero to Sixty