路由跳转后跳转回来保留滚动条位置

移动端页面H5,在列表页,点击跳到详情页,再按浏览器的返回键,回到列表页,需要保持滚动条原位置。

过程:
1.一开始我还以为和PC端一样,因为之前有过经验,React需要依赖第三方插件,可以搜一些keep-alive的插件,比如react-router-cache-route,react-live-route,这种需要webpack配置进去或者hack路由组件,其实原理就是用css的隐藏dom来代替模拟路由的卸载,css的dom隐藏,不会卸载销毁组件,也不会销毁组件中的state,还可以保留滚动条位置

  1. 移动端我一开始以为也需要这样,后来发现如果移动端跳转的时候用window.open(xxxxx,"_self"),这样子跳到详情页,然后按浏览器返回键,能自动保留滚动条位置,自动keep-alive了,就一开始用的是history.push没能成功保留,用window.open(xxxxx,"_self")反而能在浏览器里缓存住,

  2. window.open(xxxxx,"_self") 实现的效果在PC端模拟的移动设备上无效,在移动真机上有效

  3. a标签的href 也有以上效果

原理: 移动端浏览器有 往返缓存功能,现在的PC端chrome是移除了这个功能的,详见大佬文章 ,很详细https://github.com/LeuisKen/leuisken.github.io/issues/6

如果想禁用往返缓存功能,则


image.png

你可能感兴趣的:(路由跳转后跳转回来保留滚动条位置)