overflow: auto滚动条跳到指定位置

点击对应模块跳转页面,滚动到对应模块,露出到可视范围

overflow: auto滚动条跳到指定位置_第1张图片

overflow: auto滚动条跳到指定位置_第2张图片

代码:

scrollToCurrentCard() {
      // treeWrapper是包裹多个el-tree组件的父级元素,也是设置overflow:auto的元素
      let treeWrapper = document.getElementsByClassName('treeWrapper')[0]
      // 获取点击对应的模块元素,距离页面顶部的距离,减去固定的Header头部所占的高度
      let offsetTop = treeWrapper.children[this.receiveParams.id - 1].offsetTop - 90
      // 或者滚动元素的页面高度,超过视窗高度就滚动到对应的位置,否则就不滚动
      let treeClientHeight = treeWrapper.clientHeight

      if (offsetTop >= treeClientHeight) {
        treeWrapper.scrollTo(0, offsetTop)
      } else {
        treeWrapper.scrollTo(0, 0)
      }
    }

你可能感兴趣的:(vue.js,javascript)