vue实现内容滚动时,侧边导航跟随选中

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}
效果图

例子

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容