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

池中飞雪

已于 2023-11-09 15:52:19 修改

阅读量1k

点赞数

文章标签： vue.js javascript

于 2023-11-09 15:51:31 首次发布

本文链接：https://blog.csdn.net/lianwenxiu/article/details/134313395

版权

本文介绍了一个JavaScript函数`scrollToCurrentCard`，用于处理点击事件时，使页面滚动至相应模块，确保模块在可视范围内。涉及到DOM操作，特别是计算元素位置和滚动元素的滚动行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

代码：

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)
      }
    }