https://github.com/angelomelonas/vue-scroll-snap
A super simple Vue component that allows fullscreen and horizontal scroll snapping.
https://github.com/angelomelonas/vue-scroll-snap
javascript scroll snap vue vue-components
Last synced: 5 months ago
JSON representation
A super simple Vue component that allows fullscreen and horizontal scroll snapping.
- Host: GitHub
- URL: https://github.com/angelomelonas/vue-scroll-snap
- Owner: angelomelonas
- License: mit
- Created: 2019-02-16T14:28:46.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-11-26T22:17:29.000Z (7 months ago)
- Last Synced: 2025-12-11T08:35:08.666Z (6 months ago)
- Topics: javascript, scroll, snap, vue, vue-components
- Language: Vue
- Homepage:
- Size: 2.6 MB
- Stars: 32
- Watchers: 1
- Forks: 9
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Scroll Snap
A super simple Vue component that allows both fullscreen and horizontal scroll snapping.
[](https://nodei.co/npm/vue-scroll-snap/)
## Showcase
Check out the [live demo](https://angelomelonas.github.io/vue-scroll-snap/) 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
```vue
...
import VueScrollSnap from "vue-scroll-snap";
export default {
components: {VueScrollSnap},
};
.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;
}
```
### Horizontal
```vue
...
...
.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 {...}
```
### Fullscreen Vertical
```vue
...
...
/* No styling required. */
```
### Fullscreen Horizontal
```vue
...
...
/* No styling required. */
```
### Props
## Optional Props
| Prop | Type | Default |
| ------------- |:-------------:|:-------------:|
| `fullscreen` | Boolean | `false` |
| `horizontal` | Boolean | `false` |
### License
MIT