双向滚动

滚动事件

  scoll() {
    //调用的函数
    this.update();
    let right = document.getElementsByClassName('right')[0];//right=包着所有的Word的一个大div
    if (right.scrollTop > this.num) {  //当你right的滚动的上边距 大于 让Word的个数 = this.num
      this.i++;  //让i ++
      this.one = this.i  //将this.i 赋值this.one
      this.scollT()  //调用的函数 (点击让当前的active 右侧跳到可视区)
    }
    if (right.scrollTop < this.heights[this.i]) { //当你right的滚动的上边距 小于 让Word的个数 = this.num
      this.i--; //让i --
      this.one = this.i //将this.i 赋值this.one
      this.scollT() //调用的函数 (点击让当前的active 右侧跳到可视区)
    }
  },

//点击 到相应的位置

  Menu(index, e) {
    //调用的函数
    this.update();
    let right = document.getElementsByClassName('right')[0];//right=包着所有的Word的一个大div
    right.scrollTop = this.heights[index];  //因为当你点击一下左侧的每个li的时候，你的右侧的right的滚动上边距 = 当前下标的index的this.heights +2(是为了调位置)
    //定时器控制点击li添加的active 样式
    setTimeout(() => {
      this.one = index;
    }, 10)
    //定时器控制 右侧跳到可视区
    setTimeout(() => {
      //点击让当前的active 右侧跳到可视区
      this.scollT() //调用的函数 (点击让当前的active 右侧跳到可视区)
    }, 15)
  },

//点击让当前的active 右侧跳到可视区

  scollT() {
    let ulList = document.getElementsByClassName('one-left');  //获取的左侧的ul
    let active = document.getElementsByClassName('active')[0]; //获取的左侧的ul>li
    ulList[0].scrollTop = active.offsetHeight * this.one - 100
    // 左侧的li ,每点一下，就要往上跳动一下 不然它就还会回到顶部
    // 左侧的ul的滚动的上边缘的上边距=最侧的li的占位高（100）* this.one=index (index是Menu的像下标值 或 左侧的li 的index)-100
  },

//数组 获取 offsetHeight

  update() {
    let right = document.getElementsByClassName('right')[0];  //right=包着所有的Word的一个大div
    let Word = right.getElementsByClassName('Word');  // 所有的内容被Word包着的一个大块
    if (Word.length) {  //如果是Word的长度的话  21
      for (let i = 0; i < Word.length; i++) { //就便利Word的长度
        this.heights.push(Word[i].offsetTop);  //将在data中定义的heights 用动态的添加push(将每个Word的上边缘的距离)
      }
    }
    this.num = this.heights[this.i + 1]; // 让Word的个数赋值给this.num
  },