浏览器恢复滚动行为 —— history.scrollRestoration

直入主题。之前做移动端的需求时,经常遇到一种常见,就是:
a页面是一个长列表,我们滑动到某个地方假设为 100px ,点击之后进入到b页面
再从b页面回到a页面,这时候浏览器的滚动条会自动回到我们跳转前的位置,也就是 100px 的位置。

这种体贴的行为我是很喜欢的~ 但是有时候产品就非要抬杠,说 我就不想要这种行为,你给我回到顶部去(╯‵□′)╯︵┻━┻

以前没办法就经常用什么 setTimeout 大法去手动处理这些东西

氮素!!! 如果只是说setTimeout大法的话,就没我什么事了。
今天要说的是 history.scrollRestoration ,这个属性是实验性的属性,他的作用是: 允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的(auto)或者手动的(manual)。

说的很明白了,如果浏览器支持 history.scrollRestoration并且值为auto则会默认恢复滚动行为。如果设置为 manual则可以取消,这个行为不用去考虑兼容性的问题,如果有这个功能才会有恢复滚动,所以直接判断一下就可以了。无需多考虑

1
window.history.scrollRestoration && (window.history.scrollRestoration = 'auto');

以后妈妈再也不用担心我被产品怼了 O(∩_∩)O~~

google-developers 资料
mozilla-developer 资料