专栏名称: 谷歌开发者

Google中国官方账号。汇集Android, Chrome, Angular等移动和网络开发技术、Google Play和AdMob等开发者成长、优化和变现平台。

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

谷歌开发者 · 公众号 · 科技媒体 · 2017-04-28 15:05

正文

文 | Unbounce 成员 Steve Kobes

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

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

▲ 并排比较启用（左）和禁用（右）滚动锚定功能的网页。

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

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