代码之家 › 专栏 › 技术社区 › Shawn

我可以实现CSS滚动捕捉而不使非捕捉元素无法访问吗?

scroll-snap css

Shawn · 技术社区 · 3 年前

我试图通过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> 标记而不是使用容器,这显然更为典型。这是因为使用容器会让事情变得更糟,会引入多个滚动条,并且会混淆容器还是容器 <body> 正在滚动。此外,对于我试图实现的滚动捕捉设计,我需要强制容器本身捕捉到视口的顶部,这会让我们重新使用 <车身> ,或者,因为这根本不起作用(不知道为什么), <html> .

0 回复 | 直到 3 年前

umbriel 2 年前

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

显然,这会让你产生一种不同的感觉。它也有自己的发行份额;例如,当你刷新页面时,它可能仍会向下滚动到第一个页面 <p> 元素,因为它恰好足够近,可以触发邻近值。为了避免这种情况,可以使用伪选择器取消对第一个子级和最后一个子级的捕捉。

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

在生存能力方面也是如此;将snap enabled与非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>