分享监控滚动条的 Vue2 指令vue2-scrollspy 可以监控滚动条的位置，还可以直接设置滚动条的位置。最基础

Scrollspy, and animated scroll-to, for Vue2, inspired by vue-scrollspy. See ibufu.github.io/vue2-scroll…

Installation

$ npm install vue2-scrollspy --save

Setup

import Vue from 'vue';
import Scrollspy from 'vue2-scrollspy';
Vue.use(Scrollspy);

Usage

HTML:

<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>

<div v-scroll-spy="scrollPos">
    <div>
        <h1>Header 1</h1>
        <p>Content</p>
    </div>
    <div>
        <h1>Header 2</h1>
        <p>Content</p>
    </div>
</div>

Javascript:

new Vue({
    data: {
        scrollPos: 0
    }
})

Note

If you want to set something else (not body) to scroll container, you could:

<div class="container" v-scroll-spy="scrollPos">
    <div>
        <h1>Header 1</h1>
        <p>Content</p>
    </div>
    <div>
        <h1>Header 2</h1>
        <p>Content</p>
    </div>
</div>

.container {
  position: relative;
}

license

MIT