我试图通过CSSscroll-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>。
这真的不可能。因为滚动抓取API并不打算与混合的非抓取元素一起使用。我自己也遇到过同样的问题，所以我最终选择了你的条目。有一点帮助是在html元素上使用proximity而不是mandatory。
显然，这会产生一种你可能想要的不同的滚动感觉。它也有自己的发行份额；例如，当刷新页面时，它可能仍然向下滚动到第一个<p>元素，因为它恰好足够接近，可以触发接近值。为了避免这种情况，可以使用伪选择器取消对第一个子项和最后一个子项的捕捉。
在下面的演示中，它看起来可能会起作用，但这就是事情从糟糕到真正糟糕的地方。假设您希望<p>下面的某些内容也不会捕捉。如果调整窗口的大小，而在最底部，您会注意到窗口会跳回到最后注册的捕捉点。同样的事情也会发生在任何布局变化上，比如打开和关闭手风琴，或者在移动设备上浏览带有变化的url栏。不理想。
因此，就生存能力而言；将启用捕捉的元素与非捕捉的元素混合在一起是一个绝望的兔子洞，不要这样做。
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>