History API:ScrollRestoration
By Paul Lewis(设计和性能倡导者) 翻译:江天
使用history api管理url是非常棒的一件事,可以说这是一个好web app的极为重要的特点。但它有一个缺点,滚动位置虽然被存储但更重要的是,当history来回循环的时候的存储。这种情况往往意味着当滚动位置自动改变的时候很难看的跳转,特别是当你的app发生变迁,或者是页面内容发生了任何改变,基本上都会导致非常糟糕的用户体验。
为了减少这种糟糕体验你能做的不多。chrome在触发scroll事件前会先出发popState事件,这意味着你可以去popState中读取到当前滚动位置,然后反向运用到scroll事件句柄上,使用window.scrollTo(至少能工作)。但firefox,先出发scroll事件,再是popstate,老的scroll值你毫无办法获取到,甭谈储存下来。呸!
好消息是,这有个潜在的办法,history.scrollRestoration。它提供两个值,auto,作为它的默认值,可以像你所见的大多数情况一样工作,另一个manual,意味着作为一个开发者你拥有了自主掌控任何所需的scroll改变,当用户循环往复于app的history中。如果需要,你可以跟踪scroll的位置轨迹,当你使用history.pushState(),push history的时候。
这个特点是html5新增的实验性质的api,虽然很炫。因此你在使用的时候需要确保浏览器是支持的,检测代码:
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
该api在chrome 46以上被支持,接口文档:https://majido.github.io/scroll-restoration-proposal/history-based-api.html#web-idl
History API:ScrollRestoration的更多相关文章
- History API与浏览器历史堆栈管理
移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash值进行路由,这种实现不存在兼容性问题,但是缺点也有--针对不支持o ...
- HTML5学习笔记之History API
这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美 ...
- 使用HTML5的History API
HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的 ...
- 利用HTML5的History API实现无刷新跳转页面初探
HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...
- 大熊君学习html5系列之------History API(SPA单页应用的必备------重构完结版)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君学习html5系列之------History API(SPA单页应用的必备)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- HTML5 History API 实现无刷新跳转
在HTML5中, 1. 新增了通过JS在浏览器历史记录中添加项目的功能. 2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 3. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三 ...
- HTML5 History API实现无刷新跳转
在HTML5中, 新增了通过JS在浏览器历史记录中添加项目的功能. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三点,可以实现在不刷新 ...
- html5 history api
1.html5 history api适用场景,个人理解最大的用处是配合ajax使用,使ajax拥有回退.前进的用户体验. 2.代码(dive into html5中的一个小例子) 1)fer.htm ...
随机推荐
- Maven环境配置及简单使用(二)
Maven环境变量配置 配置Maven前先从官网下载相关版本,Maven下载地址:http://maven.apache.org/download.cgi,笔者使用最新版本apache-maven-3 ...
- BZOJ3028 食物(生成函数)
显然构造出生成函数:则有f(x)=(1+x2+x4+……)·(1+x)·(1+x+x2)·(x+x3+x5+……)·(1+x4+x8+……)·(1+x+x2+x3)·(1+x)·(1+x3+x6+…… ...
- SQL注入方法之:获取列名
select col_name(object_id('table'),1) from sysobjects where name='table'
- 自学Linux Shell2.2-GHOME Terminal仿真器
点击返回 自学Linux命令行与Shell脚本之路 2.2-GHOME Terminal仿真器 GNOME Terminal是GNOME桌面环境的默认终端仿真器.很多发行版,如RHEL.Fedora和 ...
- luogu3305/bzoj3130 费用流 (二分答案+dinic)
Bob肯定想挑一个流量最大的边,然后把所有的费用都加给它呗 那Alice就让流量最大的边尽量小呗 那就二分一下答案再dinic呗 #include<bits/stdc++.h> #defi ...
- 【翻译】go memory model
https://studygolang.com/articles/819 原文链接 Introduction The Go memory model specifies the conditions ...
- Windows下查看游戏服务器的IP地址
在任务管理器中查看进程的PID 在cmd中使用netstat -aon,找到PID对应的IP地址
- HDU 1069 Monkey and Banana / ZOJ 1093 Monkey and Banana (最长路径)
HDU 1069 Monkey and Banana / ZOJ 1093 Monkey and Banana (最长路径) Description A group of researchers ar ...
- Unity3d-AngryBots实例解读
最近粗略研究了下Unity3d自带的例子AngryBots,记录一下,部分内容摘自http://oulehui.blog.163.com/blog/static/7961469820125251051 ...
- 理解for循环
先给大家出一个小题目,看看最终我们的i的值是多少? for(var i=0;i<10;i+=2){ if(i<=5){ i++; continue; }else{ i--; break; ...