我可以在不使非捕捉元素无法访问的情况下实现 CSS 滚动捕捉吗？
[英]Can I achieve CSS scroll snapping without making non-snapping elements unreachable?
问题描述
I'm trying to use scroll snapping via the CSS scroll-snap-type and scroll-snap-align properties, but no matter what I do I end up making non-snapping elements unreachable.
我正在尝试通过 CSS scroll-snap-type和scroll-snap-align属性使用滚动捕捉，但无论我做什么，最终都无法访问非捕捉元素。
In the example below, for example.例如，在下面的示例中。 the paragraphs ( <p> ) are all reachable and even snapping just fine, but the header ( <h1> ) becomes unreachable because when I try to scroll up to view it, I just get snapped back down to the first paragraph beneath it.段落 ( <p> ) 都可以访问，甚至可以很好地捕捉，但是 header ( <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>
My question: Is there a way to achieve CSS scroll snapping without making non-snapping elements unreachable?我的问题：有没有办法在不使非捕捉元素无法访问的情况下实现 CSS 滚动捕捉？
further notes:进一步说明：
You'll probably notice that I'm using scroll-snap-type on the <html> tag rather than using a container, which is apparently more typical.您可能会注意到我在<html>标记上使用scroll-snap-type而不是使用容器，这显然更典型。 That's because using a container makes things even worse, introducing multiple scrollbars and confusion over whether the container or the <body> is being scrolled.那是因为使用容器会使事情变得更糟，引入多个滚动条并且混淆是容器还是<body>正在滚动。 Also, for the scroll-snapping design I'm trying to achieve to function, I would need to force the container itself to snap to the top of the viewport, which just brings us back to using <body> , or, since that simply doesn't work (don't know why), <html> .此外，对于我试图达到 function 的滚动捕捉设计，我需要强制容器本身捕捉到视口的顶部，这只会让我们回到使用<body> ，或者，因为那只是不起作用（不知道为什么）， <html> 。
1 个解决方案
解决方案1
1 2022-04-26 14:02:55
It's not really possible.这真的不可能。 Because the scroll snapping API wasn't meant to be used with mixed non-snapping elements.因为滚动捕捉 API 并不意味着与混合的非捕捉元素一起使用。 I ran into the same issue myself, hence why I ended up on your entry.我自己也遇到了同样的问题，因此我最终进入了你的条目。 One thing that helps a little is to use proximity instead of mandatory on the html element.有一点有点帮助的是在 html 元素上使用proximity而不是mandatory 。
Obviously that yields a different scroll feel that you might be going for.显然，这会产生您可能想要的不同滚动感。 And it has its own shares of issues;它有自己的问题； such as when you refresh the page it might still scroll down to the first <p> element because it happens to be close enough for the proximity value to trigger.例如，当您刷新页面时，它可能仍会向下滚动到第一个<p>元素，因为它恰好足够接近以触发接近度值。 To kind of avoid this you can unset snapping on the first and last child with pseudo selectors.为了避免这种情况，您可以使用伪选择器取消对第一个和最后一个孩子的捕捉。
In the demo below it looks like it might work, but this is where things go from bad to really bad.在下面的演示中，它看起来可能有效，但这是 go 从糟糕到非常糟糕的地方。 Let's say you want to have some content below the <p> 's that also doesn't snap.假设您希望在<p>下方有一些内容也不会捕捉。 If you resize the window, while at the very bottom you'll notice that the window jumps back up to the last registered snap point.如果您调整 window 的大小，在最底部您会注意到 window 跳回到上次注册的捕捉点。 Same thing will happen to any layout shifts such as opening and closing an accordion, or browsing on a mobile device with a shifting url bar.同样的事情也会发生在任何布局变化上，比如打开和关闭手风琴，或者在移动设备上浏览 url 栏。 Not ideal.不理想。
So in terms of viability;所以就可行性而言； mixing snap enabled together with non-snapping elements is a rabbit hole of despair, dont do it.将启用的捕捉与非捕捉元素混合在一起是绝望的兔子洞，不要这样做。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.