因此，我有所有100vh和100vw的垂直滚动捕捉部分。我原本打算单独出现页面。这些部分之一具有一个水平滚动部分，其概念与100vh和100vw部分相同。好吧，直到我添加ul标签，一切都可以正常工作。 div也一样。然后，水平部分的高度开始变化。它们仍将是页面宽度的100％，但高度会有所不同。滚动捕捉仍然有效。这是代码：
<body>
<main>
<section class="v-child">
<h1>Section 1</h1>
</section>
<section class="v-child h-sect">
<div class="h-child">
<h2>Horizontal Section 1</h2>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class="h-child">
<h2>Horizontal Section 2</h2>
<ul class="list">
<li>Thing 1</li>
<li>Thing 2</li>
</ul>
</div>
<div class="h-child">
<h2>Horizontal Section 3</h2>
<div class="list">
<h3>Item 1</h3>
<h3>Item 2</h3>
</div>
</div>
</section>
<section class="v-child">
<h1>Section 3</h1>
</section>
</main>
</body>
顺便说一下，我将scroll-snap-type: y mandatory;定位为html容器的原因是，如果您将body，main或专用div容器作为目标，则它似乎不起作用。我认为这与当前问题无关，但我想提到它是因为我认为这是奇怪的行为。
html{
scroll-snap-type: y mandatory;
}
body{
margin: 0;
}
.v-child{
scroll-snap-align: start;
background: green;
height: 100vh;
width: 100vw;
}
h1{
margin: 0;
}
.h-sect{
scroll-snap-type: x mandatory;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.h-child{
display: inline-block;
scroll-snap-align: center;
margin: 0;
height: 100%;
width: 100%;
background: yellow;
}
.list{
margin: 0;
}
我尝试给列表提供0的余量，我认为这没有什么关系，而且看起来并没有因为没有任何变化。以ul标签形式出现的列表和内部带有h3的div都似乎改变了h子部分的高度。根据我的理解，div在自己或类似的东西之后创建一个空行。我不太明白。好吧，如果我将div更改为font-size 0，则所有h子节的高度都相同，但是所有内容都是不可见的，因为现在所有font-size都为0。我也尝试将.list设置为font-size 0，这也起作用。所有部分都将是正确的大小。然后，我将16px的字体大小添加到列表中的项目，而不是列表本身，并在每个部分的顶部再次添加空白区域。这让我感到困惑，那怎么可能。 .list位于h-child部分中。为什么改变高度？那不可能！我几乎对这种布局失去了所有希望。我想不明白。有关此活动的示例，您可以在“项目”部分中查看我的投资组合网站kudlanov.com（这是一个正在进行的工作）。我在那里有更多的元素和样式，但是我在上面的代码上进行了测试，以查明问题所在，.lists似乎与此有关。
问题代码似乎就是这一部分。 <h3>具有属性display:block，这会导致您的页面出现怪异的高度。是否必须为中间部分重新设计布局容器，以允许您使用不同的标签。或者，您可以简单地将<h3>标签更改为其他标签，例如<span>，然后为其分配文本字体和bold。
<h3>Item 1</h3>
<h3>Item 2</h3>