vue 设置ios滚动条样式 vue设置滚动条位置

在文档页面(http://localhost:8080/document)拉动滚动条，然后刷新浏览器会发现滚动条依然在原来的位置，这是浏览器的默认行为，会记录浏览器滚动条默认位置。

但是点击浏览器“前进/后退”按钮，会发现当初那个页面的滚动条从0开始了，没有记录上一次滚动条的位置。现在要求点击浏览器“前进/后退”按钮，页面滚动条要记录上一次的位置，这时需要设置它的的滚动行为。

这时候需要在路由配置中设置 scrollBehavior(to,from,savePosition)函数，函数有三个参数。scrollBehavior() 函数在点击浏览器的“前进/后退”，或者切换导航的时候触发。

scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”，或者切换导航的时候触发。
console.log(to) // to：要进入的目标路由对象，到哪里去
console.log(from) // from：离开的路由对象，哪里来
console.log(savePosition) // savePosition：会记录滚动条的坐标，点击前进/后退的时候记录值{x:?,y:?}
}

实现滚动行为的代码：

router/index.js
let router = new VueRouter({
mode:'history',//默认是hash模式
linkActiveClass:'menvscode-active',
scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”，或者切换导航的时候触发。
console.log(to) // to：要进入的目标路由对象，到哪里去
console.log(from) // from：离开的路由对象，哪里来
console.log(savePosition) // savePosition：会记录滚动条的坐标，点击前进/后退的时候记录值{x:?,y:?}
if(savePosition) {
return savePosition;
}else{
return {x:0,y:0}
}
},
routes:[
{
path:'/',
name:'index',
component:Home,
},
{
path:'/home',
name:'Home',//name代表当前的路由
component:Home,
alias:'/index' //当访问'/index'的时候，就能匹配到当前的路由了。
},
{
path:'/document',
name:'Document',
components:{ // 多个视图的时候，默认渲染default的视图。
default:Document,
slider:Slider,
home:Home
}
}
]
})
export default router

我们还可以设hash来控制滚动行为，定位到某一位置

if(to.hash){ //先判断目标路由有没有hash值
return {selector:to.hash}
}

App.vue：在路径后面添加 hash 值。

• home
• document

about

@/components/Document.vue

我是文档

定位到这个元素

router/index.js
let router = new VueRouter({
mode:'history',//默认是hash模式
linkActiveClass:'menvscode-active',
scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”，或者切换导航的时候触发。
console.log(to) // to：要进入的目标路由对象，到哪里去
console.log(from) // from：离开的路由对象，哪里来
console.log(savePosition) // savePosition：会记录滚动条的坐标，点击前进/后退的时候记录值{x:?,y:?}
/*if(savePosition) {
return savePosition;
}else{
return {x:0,y:0}
}*/
if(to.hash){ //先判断目标路由有没有hash值
return {selector:to.hash}
}
},
routes:[]
})
export default router