跳到主要内容

滚动行为

2023年05月26日
柏拉文
越努力，越幸运

一、认识​

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

二、语法​

const router = createRouter({
    routes: [],
    history: createWebHistory(import.meta.env.BASE_URL),
    scrollBehavior (to, from, savedPosition) {
        return { 
            top: 0, 
            left: 0 , 
            behavior?: 'smooth' | 'instant' | 'auto',
            el?: '#main' | document.getElementById('main') | hash, 
        }
    }
});

三、用法​

3.1 基础滚动​

scrollBehavior 可以返回一个 ScrollToOptions 位置对象。ScrollToOptions。

const router = createRouter({
    routes: [],
    history: createWebHistory(import.meta.env.BASE_URL),
    scrollBehavior (to, from, savedPosition) {
        return { top: 0, left: 0 , behavior?: 'smooth' | ''}
    }
});

3.2 缓存滚动​

scrollBehavior 函数可以通过 savedPosition 来缓存之前的滚动, 返回 savedPosition，在按下 后退/前进 按钮时，就会像浏览器的原生表现那样。缓存滚动的条件为:

  1. 只有当这是一个 popstate 导航时才可用（由浏览器的后退/前进按钮触发）。

  2. 只缓存 body 级别的滚动值。如果页面中其他元素、容器发生滚动, savedPosition 始终为{top: 0, left: 0}

const router = createRouter({
  routes,
  history: createWebHistory(import.meta.env.BASE_URL),
  scrollBehavior: (to, from, savedPosition) => {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 200 }
    }
  }
})

3.3 滚动元素​

scrollBehavior() 可以通过 el 传递一个 CSS 选择器或一个 DOM 元素。在这种情况下，top 和 left 将被视为该元素的相对偏移量。如果返回一个 false 的值，或者是一个空对象，那么不会发生滚动。

const router = createRouter({
  routes,
  history: createWebHistory(import.meta.env.BASE_URL),
  scrollBehavior: (to, from, savedPosition) => {
    return {
        el: "#main" | document.getElementById('main'),
        to: -10
    }
  }
})

3.4 锚点滚动​

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return {
        el: to.hash,
      }
    }
  },
})