vue3 +Element-plus ,使用ref修改scrollTop 到指定位置

已于 2024-07-23 10:26:03 修改
阅读量2.1k 收藏 9
点赞数 11
CC 4.0 BY-SA版权
文章标签： vue.js javascript 前端
于 2023-11-29 14:10:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45913170/article/details/134688549
文章描述了一个关于使用Vue.js中的form组件和el-scrollbar库实现的交互逻辑，当`project`值改变时，滚动条的top位置会根据预设规则动态调整。

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

   <el-scrollbar height="100%" ref="previewScrollBar">
            <el-image :src="netImg" />
    </el-scrollbar>



watch(
  () => form.value.project,
  (newVal, oldVal) => {
    let toTop = 0;
      toTop = newVal === "1" ? 0 : newVal === "2" ? 400 : newVal === "3" ? 700 : newVal === "4" ? 1100 : newVal === "5" ? 1400 : 2000;
    previewScrollBar.value.scrollTo({top: toTop, behavior: 'smooth' })

  }
);

qq_45913170
关注
vue3+element-plus：实现tree横向滚动问题，el-tree怎么设置树节点内容溢出的滚动条？Tree树组件设置横向和纵向滚动条多种解决方案与代码（解决横向滚动条不显示、设置无效没用）
高级前端工程师
06-22 2772
element plus el-tree横向滚动条，el-tree 横向滚动条，element-plus树组件Tree横向滚动条不出来，vue3项目中el-tree ：横向和纵向滚动条设置，添加横向滚动条，element - tree横向滚动问题，vue3项目中el-tree 支持横向和纵向滚动条设置，element 树组件 tree 横向纵向滚动条，element-plus中使用el-tree横向滚动条不显示，不产生横向滚动条，css设置无效，滚动条不出来怎么办，解决Element-plus-Tree组件
vue3 - element plus表格自动循环滚动，Table表格组件每隔N秒无限滚动翻阅功能，el-table表格定时自动滚动（每秒自动向下滚动一行，当鼠标移入表格时停止滚动，移出表格继续滚动）
高级前端工程师
05-10 3397
el-table表格自动滚动，Element表格自动滚动，table实现自动循环滚动，自动每隔一段时间滚动翻阅，element-plus el-table表格自动循环滚动指令插件，定时自动滚动效果，自动滚动组件，表格自动循环滚动指令插件，用Vue3实现element-plus表格实现自动滚动，Vue3+ElementPlus插件:表格每秒自动滚动，实现表格自动向下滚动，表格实现表格数据动态滚动（无限滚动）详细示例代码，vue3+element plus表格向下翻滚无限循环，Vue3表格滚动实现，vue3如何
vue项目中scrollTop如何使用
MISS_zhang_0110的博客
06-16 4525
vue项目中scrollTop如何使用1. router.js路由配置2.enterpriseList.vue配置 需求：企业列表-----企业详情，当我再返回企业列表，还在第一次滑动的位置 1. router.js路由配置 { path: '/enterpriseList', name: 'enterpriseList', component: () => import('./company/enterpriseList.vue'), meta: {
vue项目设置scrollTop不起作用(总结)
10-17
主要介绍了vue项目设置scrollTop不起作用(总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue-ScrollTo 插件使用指南：实现平滑滚动效果
gitblog_00095的博客
06-25 631
Vue-ScrollTo 插件使用指南：实现平滑滚动效果 什么是 Vue-ScrollTo Vue-ScrollTo 是一个专为 Vue.js 2.x 设计的轻量级插件，它能够帮助开发者轻松实现页面元素的平滑滚动效果。与传统的锚点跳转不同，Vue-ScrollTo 提供了流畅的动画过渡，大大提升了用户体验。 核心特性 高性能动画：基于 window.requestAnimationFrame 实...
vue3 页面滚动到指定位置
qq_44871531的博客
04-23 2061
vue3 页面滚动到指定位置,类似游览器的ctrl+F的功能
vue3中scrollTop不生效的问题
m0_61469746的博客
10-28 6886
昨天在写一个v3+ts的移动端项目时 有一个点击tab栏跳转至页面相对应位置的功能 ，使用scrollTop修改dom的位置不生效。dmeo._value.scrollTop= 0 //0为滚动到顶部。const demo= ref(null) // 这行代码用来获取dom。最后查出来问题为需要设置scroll的盒子没有设置高度。
前端vue3-手动设置滚动条位置/自动定位
qq_42980244的博客
03-14 5383
第一，需要等待数据渲染完成后，再调用scrollTop，设置scrollTop=1000，这样页面初始化滚动条位置会改变。从B页面进行xx操作后需要跳转到A页面，并定位到AA职位，上图为A页面。A页面的左侧是div，内层包裹List组件。完整的scrollTop方法如下。第二，找到当前职位的高度，也要。等职位列表数据渲染完成后，获取。
vue3 点击标签滚动到相应的位置
Lb_jay的博客
11-22 2224
如图 点击右侧便签，将页面滚动到相应的位置，并且鼠标滚动到相应位置时右侧便签高亮。
vue3 + ts +element-plus ai问答持续展示文字效果是怎么实现的
最新发布
07-19
具体实现如下：在 Vue 3 项目中使用 TypeScript 和 Element Plus 实现 AI 问答的持续展示文字效果（打字机效果），可以通过以下步骤实现： ### 1. 核心实现思路 - **动态字符追加**：使用定时器逐步追加字符到显示...
帮我使用vue3+element-ui Plus写一个el-table表格自动循环滚动，可以配置是否需要滚动、滚动速度、按像素、按行或页滚动的组件
04-26
首先，您需要在Vue3项目中安装并引入element-ui及element-plus组件库: ``` npm install element-plus ``` 在您的Vue文件中，您需要引入以下项： ```vue <el-table v-if="tableData.length" :data="tableData...
vue3+elementPlus实现el-table监听触底加载
h1606641309的博客
03-07 1680
【代码】vue3+elementPlus实现el-tabs监听触底加载。
点击导航滚动到指定位置 (滑动到指定位置对应导航自动选中)Vue3+js
zhu_menglu的博客
12-22 3064
注：部分组件使用的naive-Ui。
vue3中监听滚动条、让元素滚动到指定位置、监听元素尺寸变化
菠萝蜜
12-10 4794
vue3中监听滚动条、让元素滚动到指定位置、监听元素尺寸变化
vue3页面滚动到一定位置改变导航颜色
leng0920的博客
03-22 685
vue3页面滚动到一定位置改变导航颜色
VUE 通过ref 控制滚动条到底部&顶部
u013095204的博客
11-21 5486
开发业务中需要通过按钮点击增加输入栏，当过多时，新增的输入栏在最底部，这时直接控制滚动到底部可省去用户操作。
vue3 +Element-puls ,table 中使用$refs修改scrollTop 到顶部
weixin_39475476的博客
12-09 3148
const elTableRef = ref(); //表格id
vue3 滚动条滑动到元素位置时，元素加载
m0_58002043的博客
07-04 1042
水个文效果要实现的思路就是，使用检测元素是否在视口中显示，然后在通过css来进行动画载入。
vue3 滚动区域滚动到原始位置
lstory132的博客
12-11 939
一页显示40条，超出屏幕滚动，切页面时，滚动到顶部。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值