[Vue / Nuxt - Scroll a single page or container] This is a reusable component, that allows to add a scroll snapping effect to a container or the full page. It is important that the children receive the `item` class and have special css applied when not using full page. For an example of that refer to the HomeScreen class.This code comes from the…

ScrollSnap.vue

<!--suppress CssInvalidFunction -->
<template>
  <div :class="{'fullscreen': fullscreen, 'horizontal': horizontal }" class='scroll-snap-container'>
    <!-- Items (pages or containers) that should be scroll snapped -->
    <slot></slot>
  </div>
</template>

<script lang='ts'>
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
// This is a reusable component, that allows to add a scroll snapping effect to a container or the full page.
// It is important that the children receive the `item` class and have special css applied when not using full page.
// For an example of that refer to the HomeScreen class.
// This code comes from the VueScrollSnap package, that sadly doesn't work in Nuxt, so I adapted it.
// Reference: https://www.npmjs.com/package/vue-scroll-snap .
// @group Base
export default class ScrollSnap extends Vue {
  // If true, the component will scroll the whole page with one scroll input
  @Prop({ default: false }) fullscreen!: boolean
  // If true, the component will scroll the containers horizontally
  @Prop({ default: false }) horizontal!: boolean
}
</script>

<style scoped>
.scroll-snap-container {
  display: block;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-points-y: repeat(100%);
  scroll-snap-destination: 0 0;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.scroll-snap-container.horizontal {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: x mandatory;
}

.scroll-snap-container.fullscreen {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
}

.scroll-snap-container.fullscreen.horizontal {
  flex-direction: row;
}

.item {
  scroll-snap-align: start;
}

.scroll-snap-container.fullscreen > .item {
  min-height: 100%;
  flex: 1;
}

.scroll-snap-container.horizontal > .item {
  scroll-snap-align: center;
}

.scroll-snap-container.fullscreen.horizontal > .item {
  scroll-snap-align: center;
  min-width: 100%;
  flex: 1;
}
</style>