0

I am trying to create a project using Nuxt with Locomotive Scroll, somehow the smooth scrolling does not work until i do "Inspect Element" -> then closing it. I have tried to listen for the scroll event, i got the scroll object.

here is my folder structure

// default.vue
<template>
  <div>
    <div id="appContainer" ref="appContainer" data-scroll-container class="w-screen">
      <Nuxt/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lms: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initScroll();
    });
  },
  methods: {
    initScroll() {
      const _vm = this;
      this.lms = new this.locomotiveScroll({
        el: _vm.$refs.appContainer,
        smooth: true,
        tablet: {
          smooth: true,
        },
        smartphone: {
          smooth: true,
        },
        getDirection: true,
      });
    },
  },
};
</script>

// @/plugins/locomotiveScroll.js

import Vue from 'vue';
import LocomotiveScroll from 'locomotive-scroll';

Object.defineProperty(Vue.prototype, 'locomotiveScroll', {
  value: LocomotiveScroll,
});

// nuxt.config.js
plugins: [
  {
    src: '@/plugins/locomotiveScroll',
    mode: 'client',
  }
],

Am i missing something here? have been struggling for hours cannot seem to find what cause it. :/

dunhilblack
  • 1
  • why are you initiating the `LocomotiveScroll` in `nextTick`? have you tried without it? you don't seem to have any triggers for a component update after mounting. – Igor Moraru Sep 16 '21 at 15:02
  • yep i tried without the nextTick before, i still got the same behavior – dunhilblack Sep 16 '21 at 15:12

0 Answers0