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

移动端页面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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容