0

我正在尝试通过 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 滚动捕捉而不使非捕捉元素无法访问？

进一步说明：

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

4

0 回答 0