CSS 滚动锚定：防止内容跳动，打造更流畅的用户体验

您是否曾在网上阅读文章时，页面突然跳动，导致您找不到原来的位置，不得不重新向下滚动？这种令人沮丧的体验被称为“内容跳动”，通常发生在动态内容加载到当前视口上方，将现有内容向下推时。CSS 滚动锚定是解决此问题的强大工具，它通过在内容变化时保持用户的滚动位置，显著提升用户体验。

理解内容跳动及其影响

内容跳动通常是由图片、广告或动态生成内容等资源的异步加载引起的。虽然这些元素增强了网站的功能性和视觉吸引力，但它们的延迟加载可能会打断用户的阅读流程。布局的突然变化不仅令人不适，还可能降低用户参与度，甚至可能导致用户离开您的网站。

想象一下，您正在阅读一篇带有嵌入式广告的新闻文章。当您向下滚动时，一个广告加载到您当前位置的上方，将您正在阅读的文本进一步推向页面下方。您必须停下来，重新定位，然后再次找到您的位置。这种中断会影响阅读体验，并且可能非常令人沮丧，尤其是在屏幕较小的移动设备上。

为什么这是一个问题？

糟糕的用户体验：沮丧和迷失方向会导致用户对网站产生负面看法。
参与度降低：如果用户的体验持续受到干扰，他们更有可能离开网站。
无障碍性问题：内容跳动对于残障用户尤其成问题，例如使用屏幕阅读器或依赖稳定视觉布局的用户。
潜在的 SEO 影响：虽然是间接的，但糟糕的用户体验会导致参与度指标下降，长此以往可能会影响搜索引擎排名。

CSS 滚动锚定简介

CSS 滚动锚定是一项浏览器功能，旨在在内容动态变化时自动调整滚动位置。它实质上是将用户的当前滚动位置“锚定”到页面上的特定元素，确保即使在其上方插入或删除内容时，视口也保持聚焦在该元素上。这可以防止困扰动态网站的突兀跳动和位移。

滚动锚定背后的核心机制出奇地简单。启用后，浏览器会监视文档的布局变化。如果它检测到通常会改变滚动位置的变化，它会自动调整滚动偏移量以进行补偿，从而使用户的视口保持在相同内容的中心。

如何实现 CSS 滚动锚定

控制滚动锚定的主要 CSS 属性是 overflow-anchor。此属性可以应用于任何可滚动的元素，包括 <body> 元素本身。以下是使用方法：

为整个页面启用滚动锚定

要为整个网页启用滚动锚定，您可以将 overflow-anchor 属性应用于 <body> 元素：


body {
  overflow-anchor: auto;
}

这是实现滚动锚定最简单且通常最有效的方法。auto 值告诉浏览器为整个文档自动管理滚动锚定。

为特定元素禁用滚动锚定

在某些情况下，您可能希望为页面内的特定元素禁用滚动锚定。例如，您可能有一个依赖于特定滚动行为的组件，而该行为与滚动锚定不兼容。要为特定元素禁用滚动锚定，请将 overflow-anchor 属性设置为 none：


.no-scroll-anchor {
  overflow-anchor: none;
}

然后，将 .no-scroll-anchor 类应用于您想从滚动锚定中排除的元素。

实际案例与用例

让我们探讨一些如何使用滚动锚定来改善不同类型网站用户体验的实际案例：

1. 博客和新闻文章

如前所述，博客和新闻文章是滚动锚定的主要候选对象。通过启用滚动锚定，您可以防止因图片或广告异步加载而发生的烦人内容跳动。这确保了为您的用户提供更流畅、更愉悦的阅读体验。

示例：考虑一篇带有嵌入式图片的博客文章。如果没有滚动锚定，文本会随着图片的加载而跳动，打断读者的阅读流程。启用滚动锚定后，浏览器将自动调整滚动位置，保持文本稳定并防止跳动。

2. 社交媒体信息流

社交媒体信息流通常在用户向下滚动时动态加载新内容。如果没有滚动锚定，这可能导致内容跳动和令人沮丧的用户体验。通过启用滚动锚定，您可以确保在加载新帖子时用户的滚动位置得以保持，从而创造无缝且不间断的浏览体验。

示例：想象一下滚动浏览您的社交媒体信息流。当您到达页面底部时，新帖子会自动加载。如果没有滚动锚定，这些新帖子可能会将您刚刚查看的内容推到页面更下方。有了滚动锚定，浏览器将调整滚动位置，使您正在查看的内容保持在视口中。

3. 电商产品列表

电子商务网站通常使用动态筛选和排序来显示产品列表。当应用筛选器或更改排序顺序时，页面上的内容会动态更新。如果没有滚动锚定，这可能导致内容跳动和令人困惑的用户体验。通过启用滚动锚定，您可以确保在产品列表更新时用户的滚动位置得以保持，使他们更容易浏览和找到他们想要的产品。

示例：假设您正在浏览一家在线商店并应用筛选器来缩小对特定产品的搜索范围。每次应用筛选器时，产品列表都会更新。如果没有滚动锚定，页面可能会跳回顶部，迫使您再次向下滚动。有了滚动锚定，页面将大致保持在相同的位置，让您可以不间断地继续浏览。

4. 单页应用程序 (SPA)

单页应用程序 (SPA) 严重依赖动态内容加载。当用户在应用程序中导航时，新内容会异步加载，通常会替换现有内容。如果没有滚动锚定，这可能导致频繁的内容跳动和不佳的用户体验。通过启用滚动锚定，您可以确保在内容变化时用户的滚动位置得以保持，从而创建一个更流畅、响应更快的应用程序。

示例：考虑一个具有多个部分的 SPA，当用户点击导航链接时，这些部分会动态加载。如果没有滚动锚定，每次加载新部分时，页面都可能跳回顶部。有了滚动锚定，页面将保持用户在当前部分内的滚动位置，从而在各部分之间实现更无缝的过渡。

使用 CSS 滚动锚定的最佳实践

虽然 CSS 滚动锚定是一个强大的工具，但有效使用它以避免意外后果非常重要。以下是一些需要牢记的最佳实践：

审慎使用：虽然为整个页面启用滚动锚定通常是一个很好的起点，但请考虑为可能受到负面影响的特定元素禁用它。
彻底测试：在实施滚动锚定后，务必彻底测试您的网站或应用程序，以确保其按预期工作，并且没有引起任何意外行为。
考虑性能：虽然滚动锚定的性能影响通常很小，但重要的是要意识到它确实给浏览器的布局计算增加了一些开销。如果您正在开发一个高度优化的应用程序，您可能需要分析您的代码以确保滚动锚定没有引起任何性能瓶颈。
处理边缘情况：注意滚动锚定可能无法按预期工作的潜在边缘情况。例如，如果内容变化非常快或布局极其复杂，浏览器可能无法准确调整滚动位置。
与其他技术结合：滚动锚定只是您改善用户体验的工具之一。考虑将其与其他技术（如延迟加载图片和优化内容交付）相结合，以创造真正无缝和愉悦的浏览体验。

浏览器兼容性

CSS 滚动锚定得到现代浏览器的广泛支持。但是，最好还是在 Can I use 上查看兼容性表格，以确保您用户可能使用的浏览器都支持它。

截至 2024 年 10 月，滚动锚定受以下浏览器支持：

Chrome（64 及以上版本）
Firefox（68 及以上版本）
Safari（14.1 及以上版本）
Edge（79 及以上版本）
Opera（51 及以上版本）

对于不支持滚动锚定的旧版浏览器，该行为将简单地缺失——内容跳动仍会发生。在这些情况下，您可以考虑使用基于 JavaScript 的 polyfill 来提供类似的功能。但请注意，这些 polyfill 可能比原生浏览器实现更复杂，性能也可能更差。

替代方案和后备方案

虽然 CSS 滚动锚定是防止内容跳动的首选解决方案，但您也可以使用其他方法，尤其是在旧版浏览器或滚动锚定不足以解决问题的情况下。

基于 JavaScript 的解决方案

您可以使用 JavaScript 在内容变化时手动调整滚动位置。这种方法需要更多代码，并且可能比使用 CSS 滚动锚定更复杂，但它提供了对滚动行为的更大控制。以下是一个基本示例：


// 获取当前滚动位置
const scrollPosition = window.pageYOffset;

// 加载新内容
// ...

// 恢复滚动位置
window.scrollTo(0, scrollPosition);

此代码片段在加载新内容之前捕获当前的滚动位置，然后在内容加载后恢复它。这可以防止页面跳回顶部。

占位符元素

另一种方法是使用占位符元素为将要动态加载的内容预留空间。这可以防止在插入新内容时现有内容发生位移。例如，您可以使用具有固定高度和宽度的 <div> 元素为稍后加载的图片预留空间。


<div style="width: 300px; height: 200px;">
  <img src="placeholder.gif" data-src="actual-image.jpg" alt="图片">
</div>

在此示例中，<div> 元素为图片预留了空间，防止在图片加载时其下方的内容发生位移。您可以使用 JavaScript 在实际图片加载后替换占位符图片。

滚动锚定和布局稳定性的未来

CSS 滚动锚定是改善 Web 布局稳定性的更广泛努力的一部分。作为谷歌核心 Web 指标（Core Web Vitals）的关键组成部分，累积布局偏移 (CLS) 指标衡量了页面上发生的意外布局偏移量。较低的 CLS 分数对于提供良好的用户体验和提高搜索引擎排名至关重要。

通过使用 CSS 滚动锚定和其他技术来防止内容跳动，您可以显著降低网站的 CLS 分数并改善其整体用户体验。随着浏览器不断发展并实现新的布局稳定性功能，及时了解最新的最佳实践和技术非常重要。

结论

CSS 滚动锚定是防止内容跳动并在动态网站上创造更流畅用户体验的宝贵工具。通过启用滚动锚定，您可以确保用户在浏览和与您的网站互动时不会被突兀的布局变化所打断。这不仅提高了用户满意度，还可能带来更高的参与度和更好的搜索引擎排名。

无论您是在构建博客、社交媒体平台、电子商务网站还是单页应用程序，都应考虑实施 CSS 滚动锚定以增强用户体验并创建一个更精致、更专业的网站。请记住彻底测试您的实现，并将其与其他技术相结合以达到最佳效果。拥抱 CSS 滚动锚定的力量，告别令人沮丧的内容跳动！