针对网页开发者的滚动锚定功能

文 | Unbounce 成员 Steve Kobes

网页的优势之一在于可以渐进式加载，这意味着，无需安装步骤，在网站仍在加载时，用户几乎便可立即开始使用内容。但渐进式加载也可能带来麻烦，例如，当加载屏幕外内容并向下挤压屏幕上当前显示的内容时，会出现页面意外跳动的问题。在移动设备上，这种情况可能更加糟糕，因为较小的屏幕意味着有更多的内容未显式在屏幕上，也就更容易出现页面跳动的情况。

Chrome 自其问世之初以来，便一直抵制不良或滥用内容。例如，安全浏览会在用户访问恶意网站之前给用户发出警告，标签上的视觉指示让用户能够快速追查出意外噪音的来源。与为防止用户遭遇不良体验而设计的其他功能类似，自第 56 版起，Chrome 便采用了一项名为滚动锚定的新功能来防止这些意外的页面跳动。这项功能通过将滚动位置锁定在屏幕上的某个元素上，使用户即便在继续加载屏幕外内容时也能保持在同一位置。

class="video_iframe" data-vidtype="1" allowfullscreen frameborder="0" height="417" width="556" data-src="https://v.qq.com/iframe/preview.html?vid=j0397i7tzqm&width=500&height=375&auto=0">
▲ 并排比较启用（左）和禁用（右）滚动锚定功能的网页。

由于网页的表现方式千变万化，滚动锚定对某些内容可能并不适用，或者可能会导致不正确的行为。为此，此功能还提供了“overflow-anchor” CSS 属性，以便覆盖此功能。要进一步减少潜在问题，在复杂的交互式布局中，还可通过抑制触发器来禁用滚动锚定，而在后退/前进导航中，则可允许恢复滚动。

如今，每查看一个页面，滚动锚定便为您避免了大约三次页面跳动，但有您的帮助，它还可以做得更好。通过加入滚动锚定网络平台孵化器社区团体参与滚动锚定的开发，通过 g.co/reportbadreflow 提交反馈，并设计一气呵成的网站或服务。

了解更多细节，查看文内所有链接，请点击文末“阅读原文”。

推荐阅读：

更快速、更精简的页面重新加载

在Chrome (Android 版) 中引入WebVR API

在iOS上将Chrome开源！

Chrome 57 Beta 新特性

点击「阅读原文」，查看文内链接

针对网页开发者的滚动锚定功能相关推荐

android截取网页图片,安卓版谷歌浏览器很快将获得滚动截图功能可以用来截取整个网页...
截图功能对用户来说应该是非常常用的功能,然而有时候截取网页时可能需要我们进行多次截图再拼接截图图片. 为解决这种问题现在已经有些软件提供滚动截图功能,滚动截图可帮助用户一次性将整个网页内容截图无需拼接 ...
献给网页开发者的20款Firefox插件
毫无疑问,比起其他浏览器,Chrome虽有着明显的优势,但是它的劲敌Firefox却是很多前端攻城师和研发人员的挚爱,为了尽可能地提高用户体验,Firefox的社区在插件开发和运用上有着丰富的经验,说 ...
微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.6 scroll-view组件，在小程序中如何实现滚动锚定，如何渲染一个滚动的长列表？
scroll-view 是一个可以滚动的视图区域的容器组件. 一.重要属性 scroll-view 的滚动属性,实现了两套功能左右或上下滚动下拉更新 1.1 与滚动有关的属性: scroll-x ...
针对应用开发者的几点建议
近日,Dzone网站上发布了一篇文章<Suggestions for App Developers>,针对应用开发者分享了一些开发经验,下面是该文的译文. 针对某一平台,进行了多年的应用开 ...
针对.NET开发者(neo-charm) 1.0 的NEO区块链架构参考模型
针对.NET开发者的NEO区块链文档宗旨本文档旨在记录NEO 区块链平台的(软件)体系架构参考模型,以使.NET开发人员能够更快速,更轻松地了解NEO平台. 目标记录NEO区块链平台的(软件)体 ...
java生成flash_针对 Flash 开发者的最新 Capuchin 计划资源
开发者世界 Capuchin 计划站点在经过改版后,拥有任何Flash™ 开发者所需要的一切,现在无需了解Java™ ME,就能构建引人入胜的 Capuchin 计划应用程序. 在你能找到由 Cap ...
Web安全-网页开发者工具
修改前端页面下边演示利用浏览器F12的网页开发者工具,修改Web前端界面: 更改后如图所示: 刷新页面后更改将失效.但是这个故事告诉我们,不要相信任何截图!!!!! 查看网页的密码这个故事告诉我们 ...
关于Android Studio项目的Gradle构建泡在网上的日子 / 文发表于2016-02-16 12:16 第2500次阅读 Gradle 3 编辑推荐：稀土掘金，这是一个针对技术开发者的
http://www.jcodecraeer.com/a/anzhuokaifa/Android_Studio/2016/0216/3969.html 编辑推荐:稀土掘金,这是一个针对技术开发者的一个 ...
【UE4官方文档翻译】Unreal Engine 4 For Unity Developers （针对Unity开发者的UE4）
------------------------------------------------------------------ 说明: 本翻译是参考.修正.整理后的文档.如有错误,请 ...

针对网页开发者的滚动锚定功能

针对网页开发者的滚动锚定功能相关推荐

最新文章

热门文章