CSS滚动捕捉，不限制父级大小

Question

当用户使用scroll-snap-type: y mandatory和scroll-snap-align: start滚动网页时，我正在尝试让网页滚动并捕捉到一些元素的开头。我的问题是，这是一个很大的网页，与许多示例不同的是，整个页面只是一个div和children，我有很多div和children。如果我将div的直接容器限制为100vh，则滚动捕捉可以工作，但存在双重滚动内容问题：文档滚动，内部div的捕捉内容独立于整个文档滚动。如果不限制直接父对象的高度，则捕捉将不起作用。

以下是一个示例：https://codepen.io/canp/pen/abGJKXX

基本上，上面链接中的示例执行快照，但存在双滚动问题。我希望outer类div是唯一的滚动组件，同时仍然捕捉到mid的子级pagediv，而不使用双滚动条。

如何使文档滚动以捕捉到曾孙的起始位置？

Answer 1

您的详细目标是什么还不完全清楚，但下面提供的代码满足以下要求：

• 外部div是滚动容器
• 只有一个滚动级别(滚动条(
• mid-div可以在您希望的任何级别，甚至可以不在，甚至可以多种多样的中层
• 页面可以是任何级别的(儿童、孙子、大孙子(孩子等等，或者如果你愿意的话，甚至是一个体面水平的混合物
• 页面的父级没有指定大小

CSS直接从https://www.w3.org/TR/css-scroll-snap/，因此应在任何支持捕捉的浏览器中通用。

要做的是在滚动容器所在的级别和要捕捉的元素之间不定义(其他(滚动。

/* Single scroll level with arbitrary decendent depth all snapping to the one scroll level */
.outer {
overflow-y: auto;
scroll-snap-type: y mandatory;
scroll-padding-top: 5vh;
height: 100vh;
}
.page {
height: 100vh;
scroll-snap-align: start;
}
/* For this example get rid of typical extra spacing which will impact the size of the available view */
body {
margin: 0px;
}
/* Make pages stand out, and advise what generation they are. */
.outer > div.page {
background: red;
}
.outer > div.page > p::after {
content: ': A child of the outer div has a red background.';
}
.outer > div > div.page {
background: orange;
}
.outer > div > div.page > p::after {
content: ': A grand child of the outer div has an orange background.';
}
.outer > div > div > div.page  {
background: yellow;
}
.outer > div > div > div.page > p::after {
content: ': A great grand child of the outer div has an yellow background.';
}
.outer > div > div > div > div.page  {
background: green;
}
.outer > div > div > div > div.page > p::after {
content: ': A great great grand child of the outer div has a green background.';
}
.outer > div > div > div > div > div.page  {
background: blue;
color: white;
}
.outer > div > div > div > div > div.page > p::after {
content: ': A great great great grand child of the outer div has a blue background and white text.';
}

<div class="outer">
<div class="page">
<p>Page 0</p>
</div>
<div>
<div class="page">
<p>Page 1</p>
</div>
<div>
<div class="page">
<p>Page 2</p>
</div>
</div>
<div class="page">
<p>Page 3</p>
</div>
<div>
<div>
<div class="page">
<p>Page 4</p>
</div>
</div>
<div class="page">
<p>Page 5</p>
</div>
</div>
<div>
<div>
<div>
<div class="page">
<p>Page 6</p>
</div>
</div>
</div>
<div class="page">
<p>Page 7</p>
</div>
</div>
</div>
<div class="page">
<p>Page 8</p>
</div>
</div>

Answer 2

我认为我们应该尝试以下语法

scroll-snap-type: none;

有关详细信息，以下是滚动捕捉型的文档