vue记录滚动条位置

已于 2022-03-28 21:13:36 修改
阅读量1.4k 收藏 3
点赞数
文章标签： vue
于 2022-03-28 21:06:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kilito_01/article/details/123806156
版权

在要记录滚动条位置的页面的路由，在mate里加上scrolltop：0 这个属性，然后在这个页面中，activeted中，去监听滚动条的方法，window.addeventlistener（“scroll”，this.scrollFn），去实时记录向上滚动的距离，在离开页面的方法中，deactiveted中销毁监听的方法，window.removeaddeventlistener（“scroll”，this.scrollFn）
在这里插入图片描述
下面是scrollFn方法在这里插入图片描述

kilito_01
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-scroller记录滚动位置的示例代码
08-28
本篇文章主要介绍了vue-scroller记录滚动位置的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决Vue页面固定滚动位置的处理办法
01-19
最近做项目遇到一个问题，就是Vue滚动不固定，网上找了一些资料，说下 vue 固定...所以我们要自己实现嘛, 思路简单:List 里面监听滚动, 记录滚动位置 pos, 从 Detail 返回到 List 里面的时候, 读取 pos. mounted
vue中记录滚动条位置
老余的博客
11-02 5405
但是有个缺点，页面刷新后就不记录了，但是简单高效。在点击的时候记录滚动条位置，存入本地。, 使用缓存机制来记录滚动条位置。再次进入该路由读取滚动跳位置。
前端-Vue3 - 列表滚动条位置定位
小左的博客
11-22 1384
至此，上面已经完成了需求的功能，但是代码还是如果每个页面都拷贝这么多代码进去略微有些麻烦，我们在把代码升级一下，可以使用自定义hooks 函数。： 当用户的查询的列表数据过多，然后翻到很多页以后，点击查看详情，再点击返回后页面重新加载，再想看还得翻到刚才的位置，对于用户的体验不友好。在需要的地方引入hooks。
前端vue3-手动设置滚动条位置/自动定位
最新发布
qq_42980244的博客
03-14 1124
第一，需要等待数据渲染完成后，再调用scrollTop，设置scrollTop=1000，这样页面初始化滚动条位置会改变。从B页面进行xx操作后需要跳转到A页面，并定位到AA职位，上图为A页面。A页面的左侧是div，内层包裹List组件。完整的scrollTop方法如下。第二，找到当前职位的高度，也要。等职位列表数据渲染完成后，获取。
vue3.0记录滚动位置的两种方法
Smile_666666的博客
05-20 5077
第一种方法 onActivated+onBeforeRouteLeave 方法实现 import { onBeforeRouteLeave} from 'vue-router' const scrollRef = ref(null) const scrollTop = ref(0) onActivated(()=>{ nextTick(()=>{ scrollRef.value.scrollTop = store.getters.scrollTop }) }) onBefor
Vue记住滚动条位置 scrollBehavior + debounce
pingting_的博客
03-14 3198
Vue记住滚动条位置1. 先给占位符加一层缓存2. 在路由上加一个源信息meta，记录滚动条的top值3. 使用 scrollBehavior4. 给页面添加事件监听 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 可以自定义路由切换时页面如何滚动。 注意：这个功能只在支持history.pushState的浏览器中可用 1. 先给占位符加一层缓存 Home 是需要记住滚动条位置的组件 <!-- 路由占位符 --> &
vue 记录滚动位置_vue 路由跳转记住滚动位置，返回时回到上次滚动位置
weixin_31433053的博客
12-24 621
方法一： 利用Keep-Alive和监听器1.首先在路由中引入需要的模块{path: ‘/scrollDemo’,name: ‘scrollDemo’,meta: {keepAlive:true //需要缓存},component: resolve=> { require([‘../view/scrollDemo.vue’],resolve) }}2.在App.vue中设置缓存组件 //...
vue返回上一页面时回到原先滚动的位置的方法
10-17
主要介绍了vue返回上一页面时回到原先滚动的位置的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue使用keep-alive保持滚动条位置的实现方法
10-17
主要介绍了vue使用keep-alive保持滚动条位置的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue记住滚动条和实现下拉加载的完美方法
11-19
当我们在开发 web app 的时候，经常会遇到一个问题，就是当从一个可滚动的列表页进入到下一个详情页面，然后返回列表页面的时候，很难去还原滚动条的状态，无法记住进来时候的位置。 以前我尝试过很多方法： 有 vue...
vue中进入详情页记住滚动位置的方法(keep-alive)
10-17
今天小编就为大家分享一篇vue中进入详情页记住滚动位置的方法(keep-alive)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+elementUi获取滚动条位置、判断是否存在滚动条、addEventListener、removeEventListener、document、window、scroll、client
05-06 6152
vue+elementUi获取滚动条位置、判断是否存在滚动条、addEventListener、removeEventListener、document、window、scroll、client
vue记录页面滚动条的位置
qq_41904178的博客
07-19 1304
在开发过程中，会遇到记录页面滚动条位置的需求，正好项目遇到，就随手做个笔记。 实现原理： 先在第一个页面中算出滚动条的位置，会有一个高度，然后把这个页面的滚动的高度在第二个页面动态给滚动条位置赋值即可。话不多说，上代码。 第一个页面里： this.elTreeMonthScrollTop为要同步位置的滚动条的高度。在第一个页面拿到了以后，要在第二个页面使用，首先得把它传到第二个页面，这个根据实际情况来决定。我这里使用的vue的路由传参。 第二个页面里： 动态给第二个页面的滚...
vue项目实现后退保持滚动条位置
weixin_43952634的博客
07-02 1267
需求是：a->b->c a页面和b页面都在前一个页面后退回来的时候保持之前离开页面时滚动条的位置 因我的项目不止三个页面，并且有的页面不需要保持状态 所以我使用了路由元信息来判断页面是否需要保持状态 首先在路由里添加keepAlive 为 true时页面需要保持状态 又因为a、b页面只有当他的前一个页面后退回来才需要保持而别的页面进入a、b页面是不需要保持的 所以又添加了isBa...
Vue3：返回组件（运用keepAlive保留滚动位置）
米拉
09-16 4998
this.$router.go(-1) 返回上一页最简单实用，现通过路由传参及keepAlive，实现返回保留滚动条位置。注意这两个activated 和 deactivated 这两个生命周期钩子函数。
vue 记录离开页面某个div的滚动条位置再次页面回到上一次滚动位置（内复element表格滚动记录）
Yourlittlecutie的博客
09-11 336
vue 记录离开页面某个div的滚动条位置再次页面回到上一次滚动位置（内复element表格滚动记录）
Vue实现渲染数据后控制滚动条位置
灰色头像@的博客
03-07 1077
需求场景如下:实现了消息发送，如果容器内消息过多，会出现滚动条，最新的消息位于最底部，不能及时出现在可视区域内，此时就需要在渲染列表后，将滚动条的位置定位到最底部。先来看看最终实现的效果 踩坑记录 直接设置滚动条的位置数据渲染完成后直接获取元素的真实高度，设置滚动条的位置，讲道理好像没什么毛病，结果滚动条的高度没有预想的渲染。问题原因：数据渲染完成后，Vue此时还没有渲染DOM元素，设置的滚动条高度还是之前的容器高度。 正确的改变方式: 使用setTimeout()，将DOM操作改为异步。
Vue记录滚动条的位置
m0_51195865的博客
01-11 1035
首先给占位符加一层缓存 //Home组件为展示界面 <keep-alive include="Home"> <router-view></router-view> </keep-alive> 在路由上加一个源信息meta，记录滚动条的top值 routes: [ { path: '/', component: Home, meta: { isRecord: true, top: 0 } }, ], scroll
vue 设置滚动条位置
05-27
如果您使用的是 Vue.js 框架，您可以将滚动条位置绑定到一个数据属性，然后在需要的时候更新数据属性的值。例如： ```html <!-- Your scrollable content here --> export default { data() { return { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值