浏览器恢复滚动行为~了解一下

时间 2019-11-17

原文原文链接

原文连接jsonz1993.github.io/2018/05/his…javascript

今天给你们介绍的history不是讲那套state，而是一个简单的属性scrollRestorationjava

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

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

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

氮素!!! 若是只是说setTimeout大法的话，就没我什么事了。今天要说的是 history.scrollRestoration ，这个属性是实验性的属性，他的做用是: 容许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性能够是自动的（auto）或者手动的（manual）。json

说的很明白了，若是浏览器支持 history.scrollRestoration而且值为auto则会默认恢复滚动行为。若是设置为 manual则能够取消，这个行为不用去考虑兼容性的问题，若是有这个功能才会有恢复滚动，因此直接判断一下就能够了。无需多考虑api

window.history.scrollRestoration && (window.history.scrollRestoration = 'auto');
复制代码

之后妈妈不再用担忧我被产品怼了浏览器

google-developers 资料ui

mozilla-developer 资料google