scrollspy (scroll on div) - 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:scrollspy-example class="bg-faded" id="navbar-example">
    <b-link class="navbar-brand" href="#">
      <span>BootstrapVue <small>(Scrolling on div)</small></span>
    </b-link>
    <b-nav tabs>
      <b-nav-item href="#fat" @click.stop="scrollIntoView($event)">@fat</b-nav-item>
      <b-nav-item href="#mdo" @click.stop="scrollIntoView($event)">@mdo</b-nav-item>
      <b-nav-item-dropdown text="Dropdown 1,2,3" right-alignment>
        <b-dropdown-item href="#one" @click.stop="scrollIntoView($event)">one</b-dropdown-item>
        <b-dropdown-item href="#two" @click.stop="scrollIntoView($event)">two</b-dropdown-item>
        <b-dropdown-divider></b-dropdown-divider>
        <b-dropdown-item href="#three" @click.stop="scrollIntoView($event)">three</b-dropdown-item>
      </b-nav-item-dropdown>
      <b-nav-item href="#foo" @click.stop="scrollIntoView($event)">@foo</b-nav-item>
    </b-nav>
  </b-navbar>
  <p>Duis in est id augue scelerisque aliquam. Proin mollis dolor augue, nec pellentesque felis maximus nec.
  </p>
  <div id="scrollspy-example">
    <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.
    </p>
    <h4 id="fat">@fat</h4>
    <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they...

CSS

#app {
  padding: 10px;
}

#scrollspy-example {
  position: bottom;
  height: 200px;
  overflow-y: scroll;
  border: 1px solid blue;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    targetActive: ''
  },
  methods: {
    onActivate(target) {
        console.log('Receved Event: scrollspy::activate for target ', target);
      },
      scrollInView($event) {
        let href = $event.target.getAttribute('href')
        if (href) {
          el = document.querySelector(href);
          if (el) {
            el.scrollIntoView({
              behavior: 'smooth'
            });
          }
        }
      }
  },
  created() {
    this.$root.$on('scrollspy::activate', this.onActivate);
  }
})