移动体验 / 方法解读

移动端锚点定位元素未跟随滚动?检查 position-anchor 属性

当锚点定位元素未跟随滚动时,需要检查 position-anchor 属性是否正确关联了锚点名称。

展示CSS锚点定位规范定义的文档页面截图
主题资料配图,非新闻现场照片 · 配图:anchor positioning 由规范css anchor positioning提出定义.

检查锚点元素是否设置了 anchor-name 属性

锚点定位功能要求锚点元素必须通过 anchor-name 属性定义一个或多个标识符。如果锚点元素没有设置 anchor-name,或者设置了 none 值,它将无法被定位元素识别。在 CSS 中,应确保锚点元素具有类似 anchor-name: --my-anchor; 的声明,其中 --my-anchor 是自定义标识符。只有定义了锚点名称,定位元素才能通过 position-anchor 属性引用它,从而建立关联。

检查时需确认锚点元素是否应用了 anchor-name 属性。如果该属性未设置或被设置为 none,定位元素将无法找到对应的锚点。此外,锚点元素必须生成一个主盒,这意味着伪元素如 ::before 和 ::after 也可以作为锚点,但它们隐式地锚定到其源元素。确保锚点元素可见且未被 display: none 或 visibility: hidden 隐藏,否则定位将无法生效。

检查定位元素是否正确设置了 position-anchor 属性

定位元素必须通过 position-anchor 属性明确指定要关联的锚点名称。如果定位元素未设置 position-anchor,或者设置的值与锚点元素的 anchor-name 不匹配,定位元素将无法与锚点建立关联。在 CSS 中,定位元素应设置类似 position-anchor: --my-anchor; 的声明,其中 --my-anchor 必须与锚点元素的 anchor-name 值一致。

验证时需确保定位元素的 position-anchor 属性值与锚点元素的 anchor-name 值完全匹配。如果锚点元素定义了多个锚点名称,如 anchor-name: --anchor1, --anchor2;,定位元素可以引用其中一个或多个。但必须确保引用的名称在锚点元素的 anchor-name 中存在。此外,定位元素必须具有绝对定位或固定定位,才能成为锚点定位元素。

检查定位元素是否使用了绝对定位或固定定位

锚点定位元素必须具有绝对定位或固定定位,才能相对于锚点元素进行定位。如果定位元素没有设置 position 属性,或者设置了 static、relative 等其他值,它将无法成为锚点定位元素,从而无法跟随锚点滚动。在 CSS 中,定位元素应设置 position: fixed; 或 position: absolute;,使其脱离文档流并成为锚点定位元素。

检查时需确认定位元素的 position 属性是否为 fixed 或 absolute。如果定位元素是 fixed,它将相对于视口定位,但仍然可以跟随锚点滚动。如果定位元素是 absolute,它将相对于最近的定位祖先元素定位,但锚点定位会改变其包含块,使其相对于锚点元素定位。确保定位元素没有设置 position: static 或 position: relative,否则锚点定位将不会生效。

检查锚点元素是否被隐藏或跳过

锚点元素不能被隐藏或跳过,否则定位元素将无法找到它。如果锚点元素设置了 display: none 或 visibility: hidden,或者被 content-visibility: hidden 跳过,定位元素将无法与它建立关联。在 CSS 中,应确保锚点元素可见且未被跳过。锚点定位会改变锚点定位元素的包含块,使其相对于锚点元素定位,而不是相对于最近的定位祖先元素。

验证时需检查锚点元素是否被隐藏或跳过。如果锚点元素设置了 display: none 或 visibility: hidden,定位元素将无法找到它。如果锚点元素被 content-visibility: hidden 跳过,定位元素将无法找到它。确保锚点元素可见且未被跳过。此外,如果多个锚点元素具有相同的锚点名称,定位元素将关联到源顺序中最后一个具有该锚点名称的锚点元素。

资料与延伸阅读

你可以通过以下原始资料核对文中概念,并继续深入阅读。

  1. anchor-name CSS property - CSS | MDN ↗
  2. 配图:anchor positioning 由规范css anchor positioning提出定义. ↗
← 更多移动体验文章返回顶部 ↑