Scrollspy 滚动监听

根据滚动位置自动更新Bootstrap导航或列表组组件，用于指示可视窗口视口中当前处于活动状态的链接。

运行原理

v-b-scrollspy 指令对正常运行有一些要求：

必须将其应用于包含 <b-nav> 或 <b-list-group> 组件的元素/组件，您要在其中指示当前处于活动状态的链接。
Scrollspy 需要 位置: 相对;相对在您监视的元素上，通常是 <body>.
监视除 <body>以外的元素时, 请确保已 设置 高度并 溢出-y: scroll; 应用.
锚点 (<a>, <b-nav-item>, <b-dropdown-item>, <b-list-group-item>) 是必需的，并且必须具有指向的 href (通过 href 或 props) 到您正在监视的容器中具有该 id 的元素. 使用 prop时, 要么将 路径 设置为已 #id-of-element结尾, 要么将位置属性hash 设置为 #id-of-element.

成功实施后, 您的导航或列表组将进行相应的更新, 根据其关联的 目标 将活动状态从一项移至下一项.

使用导航的示例

在 <b-nav>组件上使用v-b-scrollspy 监视<b-card-body>上的滚动. 滚动导航栏下方的区域，并查看活动的班级更改. 下拉项也会突出显示

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

@fat

@mdo

one

two

three

@pi0

<template>
  <div>
    <b-card no-body>
      <b-nav pills card-header slot="header" v-b-scrollspy:nav-scroller>
        <b-nav-item href="#fat" @click="scrollIntoView">@fat</b-nav-item>
        <b-nav-item href="#mdo" @click="scrollIntoView">@mdo</b-nav-item>
        <b-nav-item-dropdown text="Dropdown 1,2,3" right-alignment>
          <b-dropdown-item href="#one" @click="scrollIntoView">one</b-dropdown-item>
          <b-dropdown-item href="#two" @click="scrollIntoView">two</b-dropdown-item>
          <b-dropdown-divider></b-dropdown-divider>
          <b-dropdown-item href="#three" @click="scrollIntoView">three</b-dropdown-item>
        </b-nav-item-dropdown>
        <b-nav-item href="#pi0" @click="scrollIntoView">@pi0</b-nav-item>
      </b-nav>

      <b-card-body
        id="nav-scroller"
        ref="content"
        style="position:relative; height:300px; overflow-y:scroll;"
      >
        <p>{{ text }}</p>
        <h4 id="fat">@fat</h4>
        <p v-for="i in 3">{{ text }}</p>
        <h4 id="mdo">@mdo</h4>
        <p v-for="i in 3">{{ text }}</p>
        <h4 id="one">one</h4>
        <p v-for="i in 2">{{ text }}</p>
        <h4 id="two">two</h4>
        <p>{{ text }}</p>
        <h4 id="three">three</h4>
        <p v-for="i in 2">{{ text }}</p>
        <h4 id="pi0">@pi0</h4>
        <p v-for="i in 3">{{ text }}</p>
      </b-card-body>
    </b-card>
  </div>
</template>

<script>
  export default {
    methods: {
      // Convenience method to scroll a heading into view.
      // Not required for scrollspy to work
      scrollIntoView(evt) {
        evt.preventDefault()
        const href = evt.target.getAttribute('href')
        const el = href ? document.querySelector(href) : null
        if (el) {
          this.$refs.content.scrollTop = el.offsetTop
        }
      }
    },
    data() {
      return {
        text: `
          Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident.
        `
      }
    }
  }
</script>

使用嵌套导航的示例

Scrollspy 还可以与嵌套<b-nav>一起使用. 如果嵌套的 <b-nav-item> 是活动的, 则其 parent()s 也将是活动的. 滚动导航栏旁边的区域，然后查看活动的班级更改.

Item 1

Item 1-1

Item 2-2

Item 2

Item 3

Item 3-1

Item 3-2

<template>
  <b-container fluid>
    <b-row>
      <b-col cols="4">
        <b-navbar v-b-scrollspy:scrollspy-nested class="flex-column">
          <b-navbar-brand href="#">Navbar</b-navbar-brand>
          <b-nav pills vertical>
            <b-nav-item href="#item-1">Item 1</b-nav-item>
            <b-nav pills vertical>
              <b-nav-item class="ml-3 my-1" href="#item-1-1">Item 1-1</b-nav-item>
              <b-nav-item class="ml-3 my-1" href="#item-1-2">Item 1-2</b-nav-item>
            </b-nav>
            <b-nav-item href="#item-2">Item 2</b-nav-item>
            <b-nav-item href="#item-3">Item 3</b-nav-item>
            <b-nav pills vertical>
              <b-nav-item class="ml-3 my-1" href="#item-3-1">Item 3-1</b-nav-item>
              <b-nav-item class="ml-3 my-1" href="#item-3-2">Item 3-2</b-nav-item>
            </b-nav>
          </b-nav>
        </b-navbar>
      </b-col>

      <b-col cols="8">
        <div id="scrollspy-nested" style="position:relative; height:350px; overflow-y:auto">
          <h4 id="item-1" style="">Item 1</h4>
          <p>{{ text }}</p>
          <h5 id="item-1-1" style="">Item 1-1</h5>
          <p>{{ text }}</p>
          <h5 id="item-1-2" style="">Item 2-2</h5>
          <p>{{ text }}</p>
          <h4 id="item-2" style="">Item 2</h4>
          <p>{{ text }}</p>
          <h4 id="item-3" style="">Item 3</h4>
          <p>{{ text }}</p>
          <h5 id="item-3-1" style="">Item 3-1</h5>
          <p>{{ text }}</p>
          <h5 id="item-3-2" style="">Item 3-2</h5>
          <p>{{ text }}</p>
        </div>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
  export default {
    data() {
      return {
        text: `
          Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident.
        `
      }
    }
  }
</script>

使用列表组的示例

当Scrollspy包含具有本地href 或 to的<b-list-group>时，它可以与 <b-list-group-item>一起使用. 滚动列表组旁边的区域，并观察活动状态的变化.

Item 1 Item2 Item 3 Item 4 Item 5

Item 1

Item 2

Item 3

Item 4

Item 5

<template>
  <b-container fluid>
    <b-row>
      <b-col cols="4">
        <b-list-group v-b-scrollspy:listgroup-ex>
          <b-list-group-item href="#list-item-1">Item 1</b-list-group-item>
          <b-list-group-item href="#list-item-2">Item2</b-list-group-item>
          <b-list-group-item href="#list-item-3">Item 3</b-list-group-item>
          <b-list-group-item href="#list-item-4">Item 4</b-list-group-item>
          <b-list-group-item href="#list-item-5">Item 5</b-list-group-item>
        </b-list-group>
      </b-col>

      <b-col cols="8">
        <div id="listgroup-ex" style="position:relative; overflow-y:auto; height:300px">
          <h4 id="list-item-1">Item 1</h4>
          <p>{{ text }}</p>
          <h4 id="list-item-2">Item 2</h4>
          <p>{{ text }}</p>
          <h4 id="list-item-3">Item 3</h4>
          <p>{{ text }}</p>
          <h4 id="list-item-4">Item 4</h4>
          <p>{{ text }}</p>
          <h4 id="list-item-5">Item 5</h4>
          <p>{{ text }}</p>
        </div>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
  export default {
    data() {
      return {
        text: `
          Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
          tempor. Laborum consequat non elit enim exercitation cillum aliqua
          consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
          laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
          Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum
          nisi sit est tempor laborum mollit labore officia laborum excepteur
          commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur
          ipsum commodo tempor sunt in proident.
        `
      }
    }
  }
</script>

在带有 prop在组件上使用scrollspy

当使用 Vue Router (或 Nuxt.js) 时, 并且您正在使用 to prop生成链接时,请使用以下方法之一在渲染的链接上生成适当的 href：

<!-- using a string path -->
<b-nav-item to="#id-of-element">link text</b-nav-item>

<!-- using a router `to` location object -->
<b-nav-item :to="{ hash: '#id-of-element' }">link text</b-nav-item>

Scrollspy 可同时使用 历史记录 和 哈希路由模式，只要生成的URL以 #id-of-element结尾即可.

指令语法和用法

v-b-scrollspy:arg.mod1.mod2="option"

哪里:

arg 是要监视滚动的元素的 ID (减去 #) .可选 (默认为 body. 可以被选项 覆盖)
mod1 和 mod2 可以是移偏号或字符串 方法 (请参见下面的配置对象). 修饰符的顺序并不重要. 两者都是可选的
option 可以是标识要监视 滚动的 元素的字符串, 数字偏移量或配置对象(请参见下文). 可选在

注意: 与本机 Bootstrap v4 相比. 在 BootstrapVue中 将 v-b-scrollspy 伪指令应用于具有要激活的链接的目标元素, 而arg 或 option 指定要监视 (间谍)滚动在元素.

指令a可以应用于任何包含 <nav-item>, <b-dropdown-item>, <b-list-group-item> (或带有适当类的 <a> 标签), 的包含元素或组件因为它们已经呈现了 href 属性，该属性指向滚动元素中具有相应 id的元素.

配置对象属性

const config = {
  element: 'body',
  offset: 10,
  method: 'auto',
  throttle: 100
}

属性	类型	默认	描述
`element`	字符串或引用	`'body'`	要监视滚动的元素. 可以是 ID (`#foo`), css 选择器 (`#foo div`), 或对元素/组件节点的引用.如果是 CSS 字符串, 则使用第一个匹配元素. 如果使用 ID 则必须以 `#`开头.
`offset`	数	`10`	在触发活动状态之前，从滚动视口顶部开始的偏移量（以像素为单位）.
`method`	串	`'auto'`	`position` 将计算相对于滚动容器的目标偏移量. `offset` 将计算相对于窗口/视口顶部的目标偏移量. `如果` 滚动元素为 `body`, 则auto将选择offset `否则为position`.
`throttle`	数	`100`	调整大小 `事件` 在重新计算偏移之前停止触发的超时（以毫秒为单位）.

如果参数/修饰符和值（对象或数字）被传递，则该值优先于参数arg和修饰符.

如果任何选项的类型无效，那么会将错误写入控制台.

配置说明

如果没有scroll元素，则假定在<body>上滚动
如果scroll元素是CSS选择器，则选择第一个找到的元素
如果找不到滚动元素，则ScrollSpy会静默不执行任何操作

重要! 需要相对定位 无论实现方法如何, scrollspy 都需要使用 position: relative; 在要滚动的元素上.在大多数情况下，这是 <body>.在 <body>以外的元素上滚动查看时, 请确保已设置 CSS 高度 并 溢出-y: scroll; 应用.

指令使用示例

假设 <body> 是滚动元素，并使用默认偏移量10像素

<div>
  <b-nav v-b-scrollspy>
    <b-nav-item href="#bar">Foo</b-nav-item>
    <b-nav-item href="#baz">Bar</b-nav-item>
  </b-nav>
</div>

Assume <body> is the scroll element, and use offset of 20 pixels

<div>
  <b-nav v-b-scrollspy="20">
    <b-nav-item href="#bar">Foo</b-nav-item>
    <b-nav-item href="#baz">Bar</b-nav-item>
  </b-nav>
</div>

Element with ID #foo is the scroll element, and use default offset of 10 pixels

<div>
  <b-nav v-b-scrollspy:foo>
    <b-nav-item href="#bar">Foo</b-nav-item>
    <b-nav-item href="#baz">Bar</b-nav-item>
  </b-nav>
</div>

Element #foo is the scroll element, and use offset of 20 pixels

<div>
  <b-nav v-b-scrollspy:foo="20">
    <b-nav-item href="#bar">Foo</b-nav-item>
    <b-nav-item href="#baz">Bar</b-nav-item>
  </b-nav>
</div>

Element #foo is the scroll element, and use offset of 25 pixels

<div>
  <b-nav v-b-scrollspy:foo.25>
    <b-nav-item href="#bar">Foo</b-nav-item>
    <b-nav-item href="#baz">Bar</b-nav-item>
  </b-nav>
</div>

Element #foo is the scroll element, and use default offset of 10 pixels (note single quotes around value)

<div>
  <b-nav v-b-scrollspy="'#foo'">
    <b-nav-item href="#bar">Foo</b-nav-item>
    <b-nav-item href="#baz">Bar</b-nav-item>
  </b-nav>
</div>

Pass object as config. element can be a CSS ID (i.e #foo), a CSS selector (i.e. body), or a node reference

<div>
  <b-nav v-b-scrollspy="{element: '#id', offset: 50}">
    <b-nav-item href="#bar">Foo</b-nav-item>
    <b-nav-item href="#baz">Bar</b-nav-item>
  </b-nav>
</div>

事件用例

每当激活目标时，都会在$ root上发出 bv:scrollspy::activate 事件并以目标在 ID 作为参数 (即 #bar)

const app = new Vue({
  el: '#app',
  created() {
    this.$root.$on('bv::scrollspy::activate', this.onActivate)
  },
  methods: {
    onActivate(target) {
      console.log('Received event: "bv::scrollspy::activate" for target ', target)
    }
  }
})

指令参考

导入单个指令

您可以通过以下命名的导出将单个指令导入到您的项目中：

指示	命名为出口	导入路径
`v-b-scrollspy`	`VBScrollspy`	`bootstrap-vue`

例：

import { VBScrollspy } from 'bootstrap-vue'
// Note: Vue automatically prefixes the directive name with 'v-'
Vue.directive('b-scrollspy', VBScrollspy)

导入为Vue.js插件

该插件包括上面列出的所有单个指令.

命名为出口	导入路径
`VBScrollspyPlugin`	`bootstrap-vue`

例：

import { VBScrollspyPlugin } from 'bootstrap-vue'
Vue.use(VBScrollspyPlugin)