今天给大家介绍的 history 不是讲那套 state, 而是一个简单的属性 scrollRestoration
直入主题. 之前做移动端的需求时, 经常遇到一种常见, 就是: a 页面是一个长列表, 我们滑动到某个地方假设为 100px , 点击之后进入到 b 页面 再从 b 页面回到 a 页面, 这时候浏览器的滚动条会自动回到我们跳转前的位置, 也就是 100px 的位置.
浏览器记住滚动行为 图不动刷新一下
这种体贴的行为我是很喜欢的~ 但是有时候产品就非要抬杠, 说 我就不想要这种行为, 你给我回到顶部去()︵
以前没办法就经常用什么 setTimeout 大法去手动处理这些东西
氮素!!! 如果只是说 setTimeout 大法的话, 就没我什么事了. 今天要说的是 history.scrollRestoration , 这个属性是实验性的属性, 他的作用是: 允许 web 应用程序在历史导航上显式地设置默认滚动恢复行为. 此属性可以是自动的 (auto) 或者手动的(manual).
说的很明白了, 如果浏览器支持
history.scrollRestoration
并且值为 auto 则会默认恢复滚动行为. 如果设置为 manual 则可以取消, 这个行为不用去考虑兼容性的问题, 如果有这个功能才会有恢复滚动, 所以直接判断一下就可以了. 无需多考虑
window.history.scrollRestoration && (window.history.scrollRestoration = 'auto');
来源: https://juejin.im/post/5affc88f6fb9a07acc11fa7f