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 ...
随机推荐
- Codeforces960G Bandit Blues 【斯特林数】【FFT】
题目大意: 求满足比之前的任何数小的有A个,比之后的任何数小的有B个的长度为n的排列个数. 题目分析: 首先写出递推式,设s(n,k)表示长度为n的排列,比之前的数小的数有k个. 我们假设新加入的数为 ...
- s - t 平面图最大流 (附例题 bzoj 1001)
以下均移自 周冬的<两极相通-浅析最大最小定理在信息学竞赛中的应用> 平面图性质 1.(欧拉公式)如果一个连通的平面图有n个点,m条边和f个面,那么f=m-n+2 2.每个平面图G都有一个 ...
- CSS覆盖公共样式中的某个属性
CSS如何覆盖公共样式中的某个属性?利用CSS样式的优先级. 如下例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- MT【62】柯西求三角值域
求$sinx(\sqrt{cos^2x+24}-cosx)$的范围. 解答:[-5,5] $$\because (sinx \sqrt{cos^2x+24}-cosxsinx)^2$$ $$\le ( ...
- 学习Spring Boot:(二十四)多数据源配置与使用
前言 随着业务量增大,可能有些业务不是放在同一个数据库中,所以系统有需求使用多个数据库完成业务需求,我们需要配置多个数据源,从而进行操作不同数据库中数据. 正文 JdbcTemplate 多数据源 配 ...
- 【LOJ#6374】网格(二项式反演,容斥)
[LOJ#6374]网格(二项式反演,容斥) 题面 LOJ 要从\((0,0)\)走到\((T_x,T_y)\),每次走的都是一个向量\((x,y)\),要求\(0\le x\le M_x,0\le ...
- NOI2018退役记
NOI2018退役记 终于我也退役了-- Day0 高中毕业前最后一次坐飞机了--在机场干什么呢?当然是打元气打元气打元气.下飞机干什么呢?当然是打元气打元气打元气. 有接机服务,大巴上有个导游,又向 ...
- SQL Server 增、删、改、小部分查
--现有三个表Student.Score.Course.Teacher create table Student ( Sno ) not null,--学号 Sname ) not null,--姓名 ...
- Redis我想入门——启动
nosql数据库出现到现在很多年了.笔者一直从事C/S模式的上开发.所以相对而言笔者只是听过却从来不知道他是什么东西.时代在变化,当年所有业务都放在一个War包的时代已经不在了.微服务已经成为了世界主 ...
- A1050. String Subtraction
Given two strings S1 and S2, S = S1 - S2 is defined to be the remaining string after taking all the ...