html部分

<div class="container">
    <ul class="nav" :class="[isSelected]">
      <li><a id="navon0" href="javascript:;" @click="navClick">nav0</a> </li>
      <li><a id="navon1" href="javascript:;" @click="navClick">nav1</a> </li>
      <li><a id="navon2" href="javascript:;" @click="navClick">nav2</a> </li>
      <li><a id="navon3" href="javascript:;" @click="navClick">nav3</a> </li>
      <li><a id="navon4" href="javascript:;" @click="navClick">nav4</a> </li>
      <li><a id="navon5" href="javascript:;" @click="navClick">nav5</a> </li>
      <li><a id="navon6" href="javascript:;" @click="navClick">nav6</a> </li>
    </ul>
    <article>
      <div id="div0"></div>
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
      <div id="div4"></div>
      <div id="div5"></div>
      <div id="div6"></div>
    </article>
  </div>

javascript部分

export default {
    name: 'container',
    data() {
      return {
        isSelected: 'navon0-selected'
      }
    },
    methods: {
       // 防抖
      debounce(func, wait, immediate) {
        var timeout, args, context, timestamp, result;
        var later = function () {
          // 據上一次觸發時間間隔
          var last = new Date() - timestamp;
          // 上次被包裝函數被調用時間間隔last小于設定時間間隔wait
          if (last < wait && last > 0) {
            timeout = setTimeout(later, wait - last);
          } else {
            timeout = null;
            // 如果設定為immediate===true，因為開始邊界已經調用過了此處無需調用
            if (!immediate) {
              result = func.apply(context, args);
              if (!timeout) context = args = null;
            }
          }
        };

        return function () {
          context = this;
          args = arguments;
          timestamp = new Date();
          var callNow = immediate && !timeout;
          // 如果延時不存在，重新設定延時
          if (!timeout) timeout = setTimeout(later, wait);
          if (callNow) {
            result = func.apply(context, args);
            context = args = null;
          }

          return result;
        };
      },
      navClick(e) {
        var scrollBox1 = document.querySelector('.container');
        scrollBox1.scrollTo(0, [...e.target.id].pop() * 500)
        this.isSelected = e.target.id + '-selected';
      }
    },
    mounted() {
      var self = this;
      var liIds = [];
      var doc = document;
      var lis = doc.querySelectorAll('ul li');
      for (var i = 0; i < lis.length; i++) {
        var element = lis[i];
        liIds.push(element.querySelector('a').id);
      }

      var $scrollBox = doc.querySelector('.container');
      var scrollCallback = self.debounce(function () {
        var top = $scrollBox.scrollTop; //設置變量top,表示當前滾動條到頂部的值
        var tt = $scrollBox.clientHeight; //設置變量tt,表示當前滾動窗口高度的值
        var num = 0;
        for (var n = 0; n < 7; n++) {
          //在此處通過判斷滾動條到頂部的值和當前窗口高度的關系
          //（當前窗口的n倍 <= top <= 當前窗口的n+1倍）來取得和導航索引值的對應關系
          if (top >= n * tt && top <= (n + 1) * tt) {
            num = n;
          }
          self.isSelected = liIds[num] + '-selected';
        }

      }, 100)
      $scrollBox.addEventListener('scroll', scrollCallback)

    }
  }

為防止滾動過于頻繁，造成過多不必要的計算，使用防抖函數debounce,按需也可以換成使用節流函數throttle(抽取于underscore）

  //節流
      throttle(func, wait, options) {
        // 上下文，函數參數，函數返回值
        var context, args, result;
        // 延時器
        var timeout = null;
        // 上一次執行的func的時間點
        var previous = 0;
        if (!options) options = {};
        // 延時執行函數
        var later = function () {
          // 如果及時調用被關閉，則設置previous為0
          previous = options.leading === false ? 0 : new Date();
          timeout = null;
          result = func.apply(context, args);
          if (!timeout) context = args = null;
        };
        /** 以上變量以及函數都是通過閉包的方式訪問的 **/
        return function () {
          var now = new Date();
          if (!previous && options.leading === false) previous = now;
          // remaining容易理解，表示還剩多少時間可以再次執行func
          var remaining = wait - (now - previous);
          // 保存上下文
          context = this;
          // 獲取函數參數
          args = arguments;
          // 及時模式
          // remaining小于等于0是跳出wait的限制，可以執行了
          // remaining大于wait的情況，只有在客戶機修改了系統時間的時候才會出現
          // 這兩種情況都可以立刻對func做調用
          if (remaining <= 0 || remaining > wait) {
            // 清除定時器
            if (timeout) {
              clearTimeout(timeout);
              timeout = null;
            }
            previous = now;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
          } else if (!timeout && options.trailing !== false) { // 延時模式
            timeout = setTimeout(later, remaining);
          }
          return result;
        };
      },

css部分

body,html{height:100%}#app,*{margin:0}.nav li a:hover,.navon0-selected #navon0,.navon1-selected #navon1,.navon2-selected #navon2,.navon3-selected #navon3,.navon4-selected #navon4,.navon5-selected #navon5,.navon6-selected #navon6{border-bottom:2px solid #0052e4}*{padding:0}li{list-style-type:none}a{text-decoration:none;outline:0}.container{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;overflow:auto;width:600px;height:500px;margin:auto}.nav{position:fixed;z-index:5;display:inline-flex;flex-wrap:wrap;width:100px;height:inherit;background:#fff}.nav li{display:flex;align-items:center;justify-content:center;width:100%}.nav li a{font-size:18px;display:block;padding:10px 5px;cursor:pointer;color:#3c3c3c}#div0{background:#e6e6e6}#div1{background:#fd5331}#div2{background:#c00ab9}#div3{background:#149ce1}#div4{background:#f99831}#div5{background:#0aff3c}#div6{background:#dbe6f7}article{display:inline-block;width:80%;margin-left:100px}article>div{width:100%;height:500px}

效果圖

例子