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>

js

export default {
    name: 'container',
    data() {
      return {
        isSelected: ''
      }
    },
    methods: {
       // 防抖
      debounce(func, wait, immediate) {
        var timeout, args, context, timestamp, result;
        var later = function () {
          // 據(jù)上一次觸發(fā)時(shí)間間隔
          var last = new Date() - timestamp;
          // 上次被包裝函數(shù)被調(diào)用時(shí)間間隔last小于設(shè)定時(shí)間間隔wait
          if (last < wait && last > 0) {
            timeout = setTimeout(later, wait - last);
          } else {
            timeout = null;
            // 如果設(shè)定為immediate===true，因?yàn)殚_始邊界已經(jīng)調(diào)用過了此處無需調(diào)用
            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;
          // 如果延時(shí)不存在，重新設(shè)定延時(shí)
          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; //設(shè)置變量top,表示當(dāng)前滾動(dòng)條到頂部的值
        var tt = $scrollBox.clientHeight; //設(shè)置變量tt,表示當(dāng)前滾動(dòng)窗口高度的值
        var num = 0;
        for (var n = 0; n < 7; n++) {
          //在此處通過判斷滾動(dòng)條到頂部的值和當(dāng)前窗口高度的關(guān)系
          //（當(dāng)前窗口的n倍 <= top <= 當(dāng)前窗口的n+1倍）來取得和導(dǎo)航索引值的對(duì)應(yīng)關(guān)系
          if (top >= n * tt && top <= (n + 1) * tt) {
            num = n;
          }
          self.isSelected = liIds[num] + '-selected';
        }

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

    }
  }

為防止?jié)L動(dòng)過于頻繁，造成過多不必要的計(jì)算，使用防抖函數(shù)debounce,按需也可以換成使用節(jié)流函數(shù)throttle(抽取于underscore）

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

css

#app,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}

展示

image.png

來源文檔:lingray