• 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

  • 相关阅读:
    2006: [NOI2010]超级钢琴
    3640: JC的小苹果
    2005: [Noi2010]能量采集
    金蝶云星空修改密码策略的SQL脚本
    关于 springboot 过滤器中使用@Autowired 为空 以及 使用 @Value 无法读取yml配置的问题解决
    CAS .NET Client 循环重定向的解决办法
    K/3 Cloud SSO配置
    K/3 Cloud SSO配置答疑
    K/3 Cloud 元数据表
    AngularJS select中ngOptions用法详解【转】
  • 原文地址:https://www.cnblogs.com/jiangtian/p/7055534.html
Copyright © 2020-2023  润新知