我可以在不使非对齐元素无法访问的情况下实现 CSS 滚动对齐吗？答案

【问题标题】：Can I achieve CSS scroll snapping without making non-snapping elements unreachable?我可以在不使非对齐元素无法访问的情况下实现 CSS 滚动对齐吗？
【发布时间】：2022-04-28 19:22:19
【问题描述】：

我正在尝试通过 CSS scroll-snap-type 和 scroll-snap-align 属性使用滚动捕捉，但无论我做什么，我最终都会使非捕捉元素无法访问。

以下面的例子为例。段落 (<p>) 都可以访问，甚至可以很好地捕捉，但是标题 (<h1>) 变得无法访问，因为当我尝试向上滚动查看它时，我只是被捕捉到它下面的第一段。

html {
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow: scroll;
}
p {
  background: pink;
  padding: 3rem 4rem;
  scroll-snap-align: start;
}

<h1>THIS IS UNREACHABLE</h1>
<p>1.1</p>
<p>1.2</p>
<p>1.3</p>
<p>1.4</p>
<p>1.5</p>
<p>1.6</p>
<p>2.1</p>
<p>2.2</p>
<p>2.3</p>
<p>2.4</p>
<p>2.5</p>
<p>2.6</p>
<p>3.1</p>
<p>3.2</p>
<p>3.3</p>
<p>3.4</p>
<p>3.5</p>
<p>3.6</p>

我的问题：有没有办法在不使非捕捉元素无法访问的情况下实现 CSS 滚动捕捉？

进一步说明：

您可能会注意到我在<html> 标签上使用了scroll-snap-type，而不是使用容器，这显然更典型。这是因为使用容器会使事情变得更糟，引入多个滚动条并混淆容器或 <body> 是否正在滚动。此外，对于我试图实现的滚动捕捉设计，我需要强制容器本身捕捉到视口的顶部，这只会让我们回到使用<body>，或者，因为那只是不起作用（不知道为什么），<html>。

【问题讨论】：

标签： css scroll-snap

【解决方案1】：

这是不可能的。因为滚动捕捉 API 不适合与混合的非捕捉元素一起使用。我自己也遇到了同样的问题，因此我最终进入了你的条目。有一点帮助的一件事是在 html 元素上使用 proximity 而不是 mandatory。

显然，这会产生您可能想要的不同滚动感觉。它有自己的问题；例如，当您刷新页面时，它可能仍会向下滚动到第一个 <p> 元素，因为它恰好足够接近触发接近值。为了避免这种情况，您可以使用伪选择器取消对第一个和最后一个子项的捕捉。

在下面的演示中，它看起来可能会起作用，但这就是事情从糟糕到非常糟糕的地方。假设您希望在<p> 下方有一些内容也不会捕捉。如果您调整窗口大小，在最底部，您会注意到窗口会跳回到最后注册的捕捉点。任何布局转换都会发生同样的事情，例如打开和关闭手风琴，或者在移动设备上浏览带有移动 url 栏。不理想。

所以就生存能力而言；将 snap 与非 snapping 元素混合在一起是绝望的兔子洞，不要这样做。

html {
  scroll-snap-type: y proximity;
  height: 100vh;
  overflow: scroll;
}
p:first-of-type {
  scroll-snap-align: unset;
}
p {
  background: pink;
  padding: 3rem 4rem;
  scroll-snap-align: start;
}
h2 { height: 150vh; }

<h1>THIS IS UNREACHABLE</h1>
<p>1.1</p>
<p>1.2</p>
<p>1.3</p>
<p>1.4</p>
<p>1.5</p>
<p>1.6</p>
<p>2.1</p>
<p>2.2</p>
<p>2.3</p>
<p>2.4</p>
<p>2.5</p>
<p>2.6</p>
<p>3.1</p>
<p>3.2</p>
<p>3.3</p>
<p>3.4</p>
<p>3.5</p>
<p>3.6</p>
<h2>content below</h2>

【讨论】：

我还尝试在 HTML 元素的顶部和页脚的底部添加捕捉，正是为了避免页面在调整大小或加载时跳来跳去并立即从顶部滚动。有点工作，但不是 100%，就像你说的，还有很多问题。我的临时结论是 CSS 滚动捕捉还没有准备好用于生产，除非在一些非常特殊的情况下（例如页面上的每个元素都会捕捉）。