vue3中scrollTo不生效解决方案

已于 2024-05-31 11:19:21 修改
阅读量632 收藏
点赞数 4
文章标签： css vue.js
于 2024-05-31 11:18:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ygzhzzy/article/details/139347570
版权

        直接说原因，是css样式overflow引发的window.scrollTo();方法不生效的。

        overflow一定不能为hidden其它随便，至于是为什么，我的理解是 overflow:hidden; 是超出部分隐藏，这时候你的高度只能是你设置的大小，不管你怎么滚它就怎么大点，所以把它设为别的或注释掉试试呢；

        还有一点，记得设置高度

ygzhzzy
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue单页路由跳转后scrollTop的问题
12-10
作为vue的初级使用者，在开发过程中遇到的坑太多了。在看页面的时候发现了页面滚动的问题，当一个页面滚动了，点击页面上的路由调到下一个页面时，跳转后的页面也是滚动的，滚动条并不是在页面的顶部。 最开始我使用了一个很笨的方法，每个页面上都加上window.scrollTop(0,0);来解决问题，但是这个太繁琐了。最后和小伙伴们商量了一下，在main.js页面上加了这么一段代码 router.afterEach(function (to) { window.scrollTo(0, 0) }) 路由跳转后就不会出现滚动的问题了。 但是这种做法是不友好的，我们可以使用scrollBehavior
vue-scrollto：添加指令以侦听单击事件并滚动到元素
02-06
Vue滚动 滚动到元素从未如此简单！ 这适用于vue 2.x和vue 3.x （自 ） 对于vue 1.x使用vue-scrollTo@1.0.1 （请注意大写vue-scrollTo@1.0.1 T），但请记住，旧版本取决于jquery 。 引擎盖下 vue-scrollto使用window.requestAnimationFrame来执行动画，从而提供最佳性能。 使用缓动（ Easy）完成了-经过良好测试的缓动微库。 它甚至知道用户何时中断，并且不会强制滚动而导致不良的UX。 正在安装 该软件包可在npm上获得。 如果您以前使用过此软件包，请确保您使用的软件包正确，因为它已从“
vue3.0点击事件之scrollTo滚动
一句话介绍不了
12-02 3433
具体语法及注释如下 <template> <div> <!-- @ == v-on 事件类型为click scroll为自己定义的事件名字 --> <button @click="scroll">按钮</button> </div> </template> <script> export default { name: "yanshi", methods: { // 没
通过window.scrollTo实现丝滑跳转到页面的某个位置
最新发布
weixin_42966151的博客
06-29 325
通过计算对应id的组件距离页面顶部的距离，来使用window.scrollTo丝滑跳转到该位置。
推荐：vue-scrollto——优雅的Vue滚动解决方案
gitblog_00056的博客
05-12 526
推荐：vue-scrollto——优雅的Vue滚动解决方案 vue-scrolltoAdds a directive that listens for click events and scrolls to elements.项目地址:https://gitcode.com/gh_mirrors/vu/vue-scrollto 在网页开发中，平滑滚动效果能为用户体验增色不少。今天，我们向您推荐一...
vue3滑动到顶部
王延朕的博客
10-20 1240
【代码】vue3滑动到顶部。
scrollTo() 无效问题处理
Kratial的博客
02-02 6752
scrollTo无效问题处理
window.scrollTop 不生效的原因，如何解决
范德萨的博客
02-17 5333
需要获取到当前滚动条的页面元素，之后加上返回顶部的方法即可！
vue3关于滚动条的应用
dh99999900的博客
12-03 1570
vue3关于滚动条的详细应用
window.scrollTo滚动条滚动速度 滚动到指定距离
qq_24674403的博客
09-16 2802
Window.scrollTo()滚动到文档中的一组特定坐标。
解决vue页面DOM操作不生效的问题
08-27
在Vue框架中，页面动态更新是非常常见的需求，但有时候开发者可能会遇到在页面上进行DOM操作不生效的问题。这种情况通常发生在某些数据更新之后，但直接进行DOM操作时，并没有取得预期效果。Vue使用的是虚拟DOM...
解决vue addRoutes不生效问题
10-14
在Vue.js应用中，`vue-router`是官方推荐的路由管理库，用于处理单页应用(SPA)的页面切换和导航。在某些情况下，我们可能需要动态添加路由，...遵循上述解决方法，可以有效地避免`addRoutes()`不生效和路由冲突的问题。
详解vue-cli3 中跨域解决方案
12-01
在开发过程中，尤其是在前后端分离的项目中，前端与后端通常部署在不同的服务器上，导致在本地开发时会遇到跨域...总的来说，Vue CLI 3 的跨域解决方案为开发者提供了便利，使得在本地开发过程中能够顺利对接后端API。
解决在vue项目中webpack打包后字体不生效的问题
10-18
总的来说，解决Vue项目中Webpack打包后字体不生效的问题主要涉及CSS编写习惯、Webpack配置以及浏览器兼容性。选择适合项目需求的方法，可以确保字体在生产环境中的正确显示。在开发过程中，及时检查控制台的元素样式...
scrollTo平滑滚动
m0_45077247的博客
01-10 1541
scrollTo平滑滚动
window.scrollTo、scrollTop
qq_25741071的博客
03-08 3595
if(!time) {// 设置循环的间隔时间 值越小消耗性能越高 let spacingInex = time / spacingTime;// 计算循环的次数 let nowTop = document . body . scrollTop + document . documentElement . scrollTop;// 获取当前滚动条位置 let everTop =(number - nowTop) / spacingInex;
scrollTo无法回到顶部问题
qq_48018255的博客
04-11 624
scrollTo无法回到页面顶部
html、body、document、window的区别
weixin_34388207的博客
10-10 435
html是一门超文本标记语言； document对象代表整个html文档,可用来访问页面中的所有元素； body代表document的主体子对象，除浏览器头部，页面中能够看到的内容都属于body中的内容； window代表浏览器中打开的窗口，代表运行环境。 在javascript中： window对象是一个虚拟的对象，浏览器在打开HTML文档时生成window对象，可以把它看作是你所使用...
window.scrollTo控制滚动条平滑的滚动到某个位置
qq_38985463的博客
01-22 7396
语法一：window.scrollTop(x,y) //x横坐标 y纵坐标 例：window.scrollTop(0，1000) 语法二：window.scrollTop(options) window.scrollTo({ top:560, left:0, behavior: "smooth" }); // top:纵坐标 left:横坐标 behavior 类型String,表示滚动行为,支持参数 sm..
vue3 项目中 meta不生效
05-11
在 Vue3 项目中，如果你使用了 Vue Router，你可以通过配置路由元信息（meta）来实现某些功能，例如登录验证、权限控制等。但是，有时候你会发现设置的 meta 并没有生效，这可能是由于以下原因导致的： 1. 未正确配置路由 在 Vue3 中，路由的配置方式与 Vue2 有所不同，需要使用 createRouter 方法来创建路由实例。在创建路由实例时，需要将路由配置对象作为参数传入，确保你已正确配置了路由，并正确设置了 meta 信息。 2. 未正确获取 meta 信息 在组件中获取路由元信息时，需要使用到路由对象的 $route 属性。如果你未正确获取 $route 属性或未正确读取 meta 信息，那么 meta 信息也无法生效。你可以在组件中使用如下代码获取 meta 信息： ``` this.$route.meta ``` 3. 未正确使用路由导航守卫 如果你使用了路由导航守卫来控制路由跳转，那么需要确保在导航守卫中正确地获取和判断 meta 信息，例如： ``` router.beforeEach((to, from, next) => { const { meta } = to if (meta.requiresAuth && !isLoggedIn()) { next('/login') } else { next() } }) ``` 以上是一些常见的 meta 信息未生效的原因，你可以根据实际情况进行排查。如果以上方法都无法解决问题，你可以提供更多的代码和问题描述，让我更好地帮助你解决。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值