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的更多相关文章

  1. History API与浏览器历史堆栈管理

    移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash值进行路由,这种实现不存在兼容性问题,但是缺点也有--针对不支持o ...

  2. HTML5学习笔记之History API

    这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美 ...

  3. 使用HTML5的History API

    HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的 ...

  4. 利用HTML5的History API实现无刷新跳转页面初探

    HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...

  5. 大熊君学习html5系列之------History API(SPA单页应用的必备------重构完结版)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  6. 大熊君学习html5系列之------History API(SPA单页应用的必备)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  7. HTML5 History API 实现无刷新跳转

     在HTML5中, 1. 新增了通过JS在浏览器历史记录中添加项目的功能. 2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 3. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三 ...

  8. HTML5 History API实现无刷新跳转

    在HTML5中, 新增了通过JS在浏览器历史记录中添加项目的功能. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三点,可以实现在不刷新 ...

  9. html5 history api

    1.html5 history api适用场景,个人理解最大的用处是配合ajax使用,使ajax拥有回退.前进的用户体验. 2.代码(dive into html5中的一个小例子) 1)fer.htm ...

随机推荐

  1. IBM推出新一代云计算技术来解决多云管理

    IBM 云计算论坛在南京举行,推出了一项全新的开放式技术,使用户能够更加便捷地跨不同云计算基础架构来管理.迁移和整合应用. IBM 多云管理解决方案(Multicloud Manager)控制面板 据 ...

  2. mysql关于binlog日志的操作

    查看binlog日志选项和存储位置: mysql> show variables like 'log_%'; 1.查看所有binlog日志列表 mysql> show master log ...

  3. BZOJ4541 HNOI2016矿区(平面图转对偶图)

    考虑先将平面图转化为对偶图.具体地,将无向边拆成两条有向边.每次考虑找到包围一个区域的所有边.对当前考虑的边,找到该边的反向边在该边终点的出边集中,按极角序排序的后继,这条后继边也是包围该区域的边.这 ...

  4. C# 枚举值 (二) 多属性 操作

    很多时候,我们的枚举值可能需要中英文, 那么可以使用下面的方法: 下面这个类,包含2部分. 1 BaseDescriptionAttribute特性的重载 2 枚举的操作类 EnumOperate n ...

  5. NOIP 2018 游记(退役了!)

    一片空白 在霉的不能再霉的18年11月,Noip2018上,倒霉的我也是贼有意思,感冒加身,D2发烧,数组开小…我还能说什么MMP,身体和考试能力真的很重要. ……(省略无数字的心理活动,有空补上~) ...

  6. Java8的flatMap如何处理有异常的函数

    Java8的flatMap函数,作用是:如果有值,为其执行mapping函数返回Optional类型返回值,否则返回空Optional. 见到的映射函数往往都只有一句话,连大括号都不需要加的,如下: ...

  7. MT【222】几道自招面试真题

    1.(2015东南大学)2分钟找杯子,4分钟找茶叶,7分钟烧水,爸爸花13分钟给家访的老师泡茶,请问你怎么看? 2.(2014复旦大学)共有5顶帽子,三个黑的两个白的,三个人排成一排,并让这三个人每个 ...

  8. 说说Java 位运算

    前言 我们都知道,在计算机世界里,再复杂,再美的程序,到最后都会变成0与1.也就是我们常说的:二进制.二进制相信大家都很熟悉.与现实世界不同的是,在现实世界里,我们通常都是用十进制来表示的,也就是遇十 ...

  9. 洛谷 P3705 [SDOI2017]新生舞会 解题报告

    P3705 [SDOI2017]新生舞会 题目描述 学校组织了一次新生舞会,\(Cathy\)作为经验丰富的老学姐,负责为同学们安排舞伴. 有\(n\)个男生和\(n\)个女生参加舞会买一个男生和一个 ...

  10. 关于scrollintoview()真的是有意思极了,结合普通tab切换一起看看

    scrollIntoView(alignWithTop) 是html5新特性中的一个元素,他主要是指滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素. alignWithTop是true ...