github.com/Desdesdesgo/vue-scrollwatch

vue-scrollwatch

scrollwatch features：

• auto detect element enter viewport when scroll
• expose api: scrollTo , to scroll element to enter viewport
• you can set scroll container ,not just window
• use vue directive
• no limitation of nav list

特性：

• 滚动时判断出窗口中当前元素
• 暴露api scrollTo 自由指定要滚到的位置
• 滚动容器自由指定，不局限于window
• vue 指令的方式
• 导航列表没有任何限制

click to demo

learning usage from src/views/page1.vue and page2.vue
查看源码中的src/views/page1.vue and page2.vue 获得详细使用方式

Installation

npm install --save vue-scrollwatch

in main.js

import vueScrollwatch from "vue-scrollwatch"
Vue.use(vueScrollwatch)

Usage

导航
nav

<ul>
    <li @click="scrollTo('a')">section 1</li>
    <li @click="scrollTo('b')">section 2</li>
    <li @click="scrollTo('c')">section 3</li>
    <li @click="scrollTo('d')">section 4</li>
</ul>

element to watch

 <div class="section" v-scrollWatch="{name:'a',offset:0,callback:spyDomChange}">scetcion 1</div>
<div class="section" v-scrollWatch="{name:'b',offset:0,callback:spyDomChange}">scetcion 2</div>
<div class="section" v-scrollWatch="{name:'c',offset:0,callback:spyDomChange}">scetcion 3</div>
<div class="section" v-scrollWatch="{name:'d',offset:0,callback:spyDomChange}">scetcion 4</div>

callback and scrollTo in methods

import scrollWatch from "vue-scrollwatch"
export default {
    ...
    methods:{
        spyDomChange(node) {
            if (this.activeMenu != node.name)
                this.activeMenu = node.name
        },
        scrollTo(name){
            scrollWatch.scrollTo(name)
        }
    }
    ...
}

if you want to define a container to scroll (not window)
如果你想指定滚动容器，而不是window

<div id="scrollDom">
    <div class="section" v-scrollWatch="{name:'a',offset:0,callback:spyDomChange}">scetcion 1</div>
    <div class="section" v-scrollWatch="{name:'b',offset:0,callback:spyDomChange}">scetcion 2</div>
    <div class="section" v-scrollWatch="{name:'c',offset:0,callback:spyDomChange}">scetcion 3</div>
    <div class="section" v-scrollWatch="{name:'d',offset:0,callback:spyDomChange}">scetcion 4</div>
<div>

import scrollWatch from "vue-scrollwatch"
export default {
    ...
    created(){
        scrollWatch.setContainer("#scrollDom")
    }
    ...
}

you also can use class as selector
你也可以使用 class 来作为css 选择器

container and element to be watch hasn't to be father and sons,it also can be grandfather or grand-grandfather
滚动容器和监听元素之间不一定是父子关系,可以是爷孙关系，也可以是祖宗孙子关系

Options

name

required: true

offset

元素位置偏移 default: 0

callback

type: function

dev example

 npm run dev

Thanks

vue-scrollactive