vue--解决多个页面之间滚动互相影响的问题

最新推荐文章于 2025-10-23 22:11:12 发布
原创 最新推荐文章于 2025-10-23 22:11:12 发布 · 4.6k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue-页面滚动+动画

本文介绍了解决Vue.js中页面跳转时滚动位置错误的方法，通过在router配置中添加scrollBehavior函数，确保每次跳转后页面总是从顶部开始，提升用户体验。

页面在点击跳转到新页面时可能会出现: 新页面的当前所在位置是原页面滑动到的位置，影响用户体验

解决方案
https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html
router 内添加

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

在这里插入图片描述

动画效果

在这里插入图片描述

引用组件页面
  1. 导入在这里插入图片描述
  2. 注册
    在这里插入图片描述
  3. 使用
    在这里插入图片描述
Vue和Vue-Element-Admin（一）：Vue基础和框架
叶子叶来
10-27 9973
前后端开发容易有成就感，对前端的变魔术式的展示效果和开发一直很感兴趣，奈何毕业后3年都在做大数据平台和数据分析相关的东西，全是业务思路没有IT思路； 当前项目涉及了2个前端展示系统，基于vue-element-admin的前端框架进行前后端分离开发，选择vue-element-admin框架，它是一个vue+element ui的开源技术方案：vue-element-admin 码云地址，教程：vue-element-admin教程，下载即可运行，熟悉vue开发模式即可快速上手，界面看起来比较简洁清爽。.
vue中多个路由页面切换造成滚动互相影响问题的解决
浮生离梦的博客
01-03 2905
一、问题描述 在vue的项目开发中，出现了这样的问题。在进入一个路由页面的时候，进行了页面滚动，滚动的位置会被缓存。当离开页面以后，下次再进入一个页面的时候，切换新路由，发现默认进入的位置就是之前滚动的位置。这样，也就造成了多个路由页面滚动会发生互相影响的问题，这也并不是我们所想要的。 二、问题解决 针对这样的问题，通过去vue的官网上，Vue Router中的滚动行为上有解决方法，可以使用scr...
路由原理解析：vue-router 组件的 scrollBehavior解决问题:页面的滚动会影响到其他页面
Yanfengting的博客
03-25 1435
vue对访问记录的管理 当用户进入一个页面的时候，会往 history 栈中放入当前的记录，对页面级别的操作通过操作内置对象 history 可以满足一些需求。 vue 路由跳转就是通过对 history.pushState() 和 history.replaceState() 方法的模拟来实现，会往 history 栈中存放一条记录，这也是为什么 vue 的 router.push 方法只能在支...
Vue实战：通过配置实现多路由单页面
最新发布
qq_39181401的博客
10-23 116
页面分析完后，我们对代码如何写已经有了初步的脑图，接下来就是如何将我们的脑图通过代码显示出来；使用class类搭配Map方法区分菜单对应内容public isShowTable: boolean = true //是否展示表格1模块public globalList: any = {} // 筛选// 表格展示方式tab，默认全铺开list: [],value: '',key: '',isparent: '', // 数据来源依赖label: ''} //初始化。
Vue 折叠组件使用多次新建better-scroll，导致单击事件重复调用
Yuval的博客
02-15 1217
问题： Vue 折叠组件使用多次新建better-scroll，导致单击事件重复调用   解决： 新建better-scroll时，增加条件判断， 如果不存在Bscroll对象时生成新Bscroll对象， 若存在，调用Bscroll的方法refresh()，复用之前的better-scroll对象   例如 if (!this.listScroll) {...
四十六、Vue中路由切换时，滚动行为在组件之间相互影响的解决办法
panchang199266的博客
05-24 1728
一、问题   当我们在A组件中滚动到页面底部时，再通过路由到B组件，会发现显示的也是B组件的底部，而不是从头部开始显示？ 二、原因   组件之间的行为会相互影响。 三、解决办法   在配置路由的地方加上如下代码，例如： router.js import Vue from 'vue' import Router from 'vue-router' import Home from './pages/...
vue仿饿了么商店详情页面（列表左右联动、两侧滚动条互不影响）
大桶爆米花eee
11-16 4528
参考：https://www.jianshu.com/p/66b75f684c84 商店详情页面中要求页面划上去之后到达某一位置时，嘴上的tabs标签固定在最上边，下边的两个菜单列表可以滚动，且两个滚动互不影响；点击左侧的某一类别，右侧跳转到相对应部分。 HTML <body> <div class="header"></div> <div...
前端 解决一个页面多个滚动的问题
07-11
在前端开发中，页面中存在多个滚动区域时，可能会出现滚动冲突的问题。例如，当一个页面包含固定高度的容器（如侧边栏、弹窗或子路由组件），而这些容器内部也需要独立滚动时，如果不加以处理，滚动行为可能会相互...
Vue3实现同页面多个eltable自动循环滚动不要封装组件
04-26
好的，我现在要解决用户的问题：在Vue3中实现同一页面上多个Element Plus表格（el-table）的自动循环滚动，而且不使用封装组件的方式。用户之前已经得到了一个使用封装组件的方案，现在希望不封装组件直接实现。我...
uni-app vue2 页面有两个mescroll-uni时，第一个mescroll-uni的上拉加载不会触发，怎么解决
06-20
希望这些解决方案能够帮助你解决问题。§§相关问题§§1.如何动态计算mescroll-uni的高度以适应不同屏幕？2.mescroll-uni在uni-app中如何处理多个滚动区域？3.如何优化mescroll-uni的性能以避免滚动冲突？</think>#...
两个vue文件的外层class名一样，样式会相互影响，怎么避免名字相同但是不被影响。
qq_63322025的博客
06-08 1290
要使用CSS Modules，只需在Vue组件的style标签中添加:module修饰符，然后在class名前面添加$style即可。CSS Modules是一种将CSS作用域限制在组件内部的技术，它可以确保每个组件的class名都是唯一的，从而避免了样式冲突的问题。当两个单文件Vue的class名相同时，它们的样式会相互影响。为了避免这种情况，可以使用CSS Modules。
Vue中子组件的弹框滚动条不影响父元素滚动
cindy647的博客
02-26 5666
Vue中子组件的弹框滚动条不影响父元素滚动问题描述解决方法基于Jquery的方式原生JS：给body加上position:fixed==原生JS==：给body加上overflow:hidden 问题描述 在vue的某个页面的子组件中设置了弹框，主页面和弹窗都有滚动条，当弹窗滚动条滑到底部时，会触发主页面的滑动。怎么禁止主页面的滑动？关闭弹窗后，再恢复主页面的滑动。 解决方法 基于Jquery的方...
解决 vue 中拖动时多个页面互相影响的问题 （使用前端路由，当切换到新路由时，想要页面滚到顶部）
brake_lzk的博客
07-20 1167
在路由中，添加 scrollBehavior (to, from, savedPosition) {return { x: 0, y: 0 } }当切换到新路由时，想要页面滚到顶部 export default new Router({     routes: [ {        path: '/',        name: 'Home',       component: Home...
vue实现滚动条联动（一个滚动条控制两个或多个）
编程不过是一门失传艺术的别名，这门艺术的名字叫做“思考”
04-28 2181
这样就实现了两边表格的滚动条联动，有多个表格，也是同样的方法，使多个表格的scrollTop和scrollLeft相同就可以了。
有关vue项目页面的结构问题使用flex，控制菜单和内容不一起滚动
qq_43468165的博客
12-29 1154
今天遇到一个特别头大大问题。就是代码改着改着，账号过期后退出了登录页看不见了。 我修改了项目左右的滚动情况（菜单和内容个滚个的）如图所示 就是去控制大的app大盒子不滚动再分别去控制左右的小盒子们去实现自己的滚动 。 所以我去操作了，入口模板文件app.vue 我把样式里面的flex给删除了，写了一个overflow：hidden进去，到这里我只是想让外层的大盒子默认撑开，然后内部子盒子多了就隐藏不显示滚动就好，结果我忘了flex去了，整个页面的宽度是没有了。 就是在编写进入页面后代码时候为什么
element ui 中 调用同一个组件 写两种不同的css样式 如何使两种样式都生效互不影响 el-progress
暴走的山交君的博客
10-11 882
实现 上方进度条其他样式都隐藏只留一个黄色三角形,见下方。但是因为需要修改框架内部css,所以需要深度选择器实现。vue3 项目中需要实现一个播放控件的样式,我用的是。进度条实现, 因为上方黄色三角形需要跟着进度条移动。但这时因为有两个进度条却需要设置两种不同的样式,想设置上面为透明,但是下方样式也更改了。就会直接更改全部进度条的样式。(设置css为透明)
vue页面滚动和textarea滚动冲突问题 ,better-scroll和textarea滚动冲突解决
xtyzmnchen的博客
11-26 2194
//将代码放入全局 ,可解决所有界面中textarea不滚动问题 window.addEventListener('touchmove', function(e) { var target = e.target; if (target && target.tagName ===...
vue2.0和better-scroll实现左右联动效果
weixin_43617604的博客
08-30 976
vue2.0和better-scroll实现左右联动效果 在做移动端商城或者其他页面的时候，经常会遇到左右联动的效果 vue2.0和better-scroll这个插件一起实现左右联动效果。 实现上面的效果，思路一定很重要，还有需求 左边一级分类和右边二级分类形成联动 当滑动右侧分类列表时, 更新左侧分类选中 点击左侧一级分类项时, 右侧列表滑动到对应位置 在vue脚手架的时候，引...
vue导航栏根据页面滚动变化，点击导航栏滚动页面
clmmei_123的博客
11-02 3544
以下是两个导航栏按钮对应两个div。可以自己修改.我是参考 ==》博客《=== 的 这里是在computed下监听导航栏的点击事件，this.$refs = undefined。 1、可以在this.$nextTick(()=>{ //do something})中执行滚动事件 computed:{ ...mapState('menu', { navActive: 'navActive' }), childrenActive(){
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值