Finished project

[DevanB]

Is this project in a production ready state? I've tried to use it, but was not able to figure out why it wasn't working as expected.

Thanks!

[ibufu]

Yes，I am using it for my application. Could you provide your code and error on console? Thanks!

[DevanB]

Okay this could get long....

I ran npm i -S vue2-scrollspy and setup Scrollspy in my main.js:

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import { sync } from 'vuex-router-sync'
import Scrollspy from 'vue2-scrollspy'

sync(store, router)
Vue.use(Scrollspy)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

Then I went to a page and did the following:

<template>
  <div>
    <ul>
      <li :class='{active:scrollPos == 0}'>
        <a @click='$scrollTo(0)'>Menu 1</a>
      </li>
      <li :class='{active:scrollPos == 1}'>
        <a @click='$scrollTo(1)'>Menu 2</a>
      </li>
    </ul>
    <AdverseEvents/>
    <LaboratoryAbnormalities/>
    <WarningsAndPrecautions/>
    <div v-scrollspy='scrollPos'>
      <div>
        <h1>Header 1</h1>
        <p>Content</p>
      </div>
      <div>
        <h1>Header 2</h1>
        <p>Content</p>
      </div>
    </div>
  </div>
</template>

<script>
  import AdverseEvents from '../components/AdverseEvents'
  import LaboratoryAbnormalities from '../components/LaboratoryAbnormalities'
  import WarningsAndPrecautions from '../components/WarningsAndPrecautions'
  export default {
    components: { AdverseEvents, LaboratoryAbnormalities, WarningsAndPrecautions },
    data () {
      return {
        scrollPos: 0
      }
    },
    name: 'RisksSideEffects'
  }
</script>

After doing that, I got a console error like Failed to resolve directive: scrollspy. That was when I realized the documentation says <div v-scrollspy='scrollPos'>, but your directive is scroll-spy, so <div v-scroll-spy='scrollPos'> doesn't throw the console error. But clicking Menu 1 or Menu 2 doesn't actually do anything.

Am I missing something?

[ibufu]

I am sorry for this typo. Dose the scrollPos works? And did you add position: relative to the container of v-scroll-spy?

[DevanB]

When I changed scrollPos from 0 to 1, and back from 1 to 0, nothing happens. Also when I click the Menu 1 and Menu 2 nothings happens.

What is scrollPos referring to? I don't see anything else labeled with a value of 0 or 1 and I'm not passing in a list of sections for it to know what to scroll to.

[DevanB]

Do you have an example (other than your documentation) where it is working? I'd love to use this in my project :)

[ibufu]

@DevanB, I am so sorry! I found a bug when scroll container is body. I will fix it soon.

[DevanB]

You are the best! Thanks for fixing it, can't wait to use it!! :)

On Dec 6, 2016, at 21:37, morning notifications@github.com wrote:

@DevanB, I am so sorry! I found a bug when scroll container is body. I will fix it soon.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[ibufu]

I have updated this scrollspy to v1.1.1. There are a demo and a preview. I hope that can help you! :)

[DevanB]

Alright, had to do some more debugging, but finally got it working.

I had to change el[scrollSpyContent].eventEl and el[scrollSpyContext].scrollEl to be a specific element rather than window and body. I also edited steps and time to be passed in via the directive expression.

I can submit a PR to add the ability for user to declare their own steps and time, if you want that.

[ibufu]

According to the new README.md, you could set an element's position to relative to specify it. You are welcome to submit a PR.:)