实用的滚动

2024年4月14日 108次阅读 来源: 黄黄黄

滚动行为

==用户良好的交互体验==

  • 功能 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。
  • 注意事项
    这个功能只在 HTML5 history 模式下可用。

具体方法实例

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

to要去的路由
from 离开的路由对象
savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

滚动行为传递的值

即return后面的 值的类型

{ x: number, y: number }
{ selector: string }

string 为to.hash值带#的

    原文作者：黄黄黄
    原文地址: https://segmentfault.com/a/1190000011140726
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞