@controlla/cli/templates/landing/mixins/Scroll.js

Command line interface for rapid Controlla projects development

import { mapGetters, mapActions } from 'vuex'

export default {
  data: () => ({
    scroll: null,
    hasScroll: false,
  }),
  computed: {
    ...mapGetters(['scrollToTarget', 'scrollEvent']),
  },
  // watch: {
  //   scrollEvent() {
  //     this.scroll &&
  //       this.scrollToTarget !== '' &&
  //       this.scroll.scrollTo(this.scrollToTarget)
  //   },
  // },
  mounted() {
    typeof this.animateIn === "function" && this.animateIn()

    this.$nextTick(() => {
      setTimeout(() => this.createScroll(), 300)
    })
    this.$nextTick(() => {
      setTimeout(() => this.onResize(), 1000)
    })
  },
  beforeDestroy() {
    if (this.scroll) {
      this.scroll.destroy()
    }
  },
  methods: {
    ...mapActions(['setTarget']),
    createScroll() {
      // eslint-disable-next-line new-cap
      this.scroll = new this.$LocomotiveScroll({
        el: document.querySelector('[data-scroll-container]'),
        // scrollbarClass: 'c-scrollbar',
        getDirection: true,
        getPosition: true,
        smooth: true,
        // reloadOnContextChange: true
      })
      this.scroll.on('scroll', (instance) => {
        if (instance.scroll.y > 30) {
          document.documentElement.classList.add('is-scrolled')
          this.hasScroll = true
        } else {
          this.hasScroll = false
          document.documentElement.classList.remove('is-scrolled')
        }
      })
    },
    onResize() {
      if (this.scroll) {
        this.scroll.update()
      }
    },
  },
  update() {
    this.onResize()
  },
}