vue2滚动条el-scrollbar使用，滚动条移动和重置位置

键盘飞行员

于 2024-04-07 10:47:35 发布

阅读量478

点赞数 2

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_68397463/article/details/137455547

版权

样式效果：

一.使用Element组件滚动条

<!-- 步骤条 -->
        <el-scrollbar ref="scroll" class="scrollbar-wrapper" wrap-style="overflow-x:hidden;">
          <div class="stepBar">
            <el-steps :space="50" direction="vertical" :active="activeStep">
              <el-step v-for="(item, index) in stepData" :key="index" :title="item.label"/>
            </el-steps>
          </div>
        </el-scrollbar>

二，滚动条方法封装

// 滚动条移动
    scrollToActiveStep() {
      const scrollContainer = this.$refs.scroll.$refs.wrap // 获取滚动容器
      const scrollStep = 15 // 每次滚动的距离
      const targetScrollTop = scrollContainer.scrollTop + scrollStep // 目标滚动条位置
      const maxScrollTop = scrollContainer.scrollHeight - scrollContainer.clientHeight // 最大滚动位置

      if (targetScrollTop >= maxScrollTop) {
        scrollContainer.scrollTop = maxScrollTop
      } else {
        scrollContainer.scrollTop = targetScrollTop
      }
    },

三.滚动条重置位置方法封装

// 滚动条归位
    scrollToTop() {
      const scrollContainer = this.$refs.scroll.$refs.wrap // 获取滚动容器
      scrollContainer.scrollTop = 0 // 设置滚动条位置为顶部
    },