scrollspy (body scroll) - Bootstrap-Vue

https://bootstrap-vue.github.io/

HTML

<script src="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/tether@latest/dist/css/tether.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
  <b-navbar v-b-scrollspy="{offset:150, method:'auto'}" fixed="top" class="bg-faded" id="navbar-example">
    <b-link class="navbar-brand" href="#">
      <span>BootstrapVue <small>(Scrolling on body)</small></span>
    </b-link>
    <b-nav pills>
      <b-nav-item href="#fat">@fat</b-nav-item>
      <b-nav-item href="#mdo">@mdo</b-nav-item>
      <b-nav-item-dropdown text="Dropdown 1,2,3" right-alignment>
        <b-dropdown-item href="#one">one</b-dropdown-item>
        <b-dropdown-item href="#two">two</b-dropdown-item>
        <b-dropdown-divider></b-dropdown-divider>
        <b-dropdown-item href="#three">three</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-nav>
  </b-navbar>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin scelerisque augue, sit amet finibus risus tempus quis. Suspendisse id est faucibus, dignissim arcu non, consequat tortor. Pellentesque mollis dolor vitae tellus consectetur
    auctor. Nam tincidunt ullamcorper tortor, a pretium tellus efficitur nec. Integer velit enim, mattis et sapien in, blandit pharetra nisi. Suspendisse euismod tortor ac tellus varius, a suscipit sapien viverra. Curabitur non nunc euismod, facilisis
    nulla a, auctor elit. Duis in est id augue scelerisque aliquam. Proin mollis dolor augue, nec pellentesque felis maximus nec.
  </p>
  <div id="scrollspy-example">

    <h4 id="fat">@fat</h4>
    <p>Ad leggings keytar,...

CSS

#app {
  padding: 10px;
  padding-top: 0px;
  height:300px;
}

#scrollspy-example {}

JavaScript

new Vue({
  el: '#app',
  methods: {
    onActivate(target) {
      console.log('Receved Event: scrollspy::activate for target ', target);
    }
  },
  created() {
    this.$root.$on('scrollspy::activate', this.onActivate);
  }
})