CSS 滚动对齐而不限制父级大小

Question

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

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

基本上，上面链接中的示例确实会卡住，但存在双滚动问题。我希望outer类 div 成为唯一的滚动组件，同时仍然捕捉到没有双滚动条的mid子pagediv 。

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

Answer 1

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

• 外部 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>