2

所以我的垂直滚动捕捉部分都是 100vh 和 100vw。我打算出现单独的页面。其中一个部分具有与 100vh 和 100vw 部分相同的水平滚动部分。好吧，在我添加 ul 标签之前，一切都很顺利。div 也是如此。然后水平部分的高度开始变化。它们仍然是页面宽度的 100%，但高度会有所不同。滚动捕捉仍然有效。继承人的代码：

HTML

<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>

CSS

顺便说一句，我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-child 部分的高度。据我了解，div 在自己或类似的东西之后创建一个空行。我不太明白。好吧，如果我将 div 更改为 font-size 0，所有 h-child 部分的高度都相同，但是所有内容都是不可见的，因为所有 font-size 现在都是 0。

我还尝试将 .list 设置为 font-size 0 并且也有效。所有部分的大小都合适。然后，我将 16px 的字体大小添加到列表中的项目，而不是列表本身，这会再次在每个部分的顶部添加空白空间。这让我感到困惑，这怎么可能。.list 位于 h-child 部分内。为什么它的高度变了？！那应该是不可能的！我几乎对这种布局失去了所有希望。我想不明白。

有关此操作的示例，您可以在项目部分查看我的投资组合网站kudlanov.com（这是一项正在进行的工作）。我在那里有更多的元素和样式，但我在上面的代码上进行了测试以查明问题，它似乎与.lists有关。

4

2 回答 2

0

问题代码似乎是这部分。<h3>具有display:block在您的页面上导致奇怪高度的属性。是否必须为允许使用不同标签的中间部分重新设计布局容器。或者您可以简单地将<h3>标签更改为其他喜欢<span>并为其分配文本字体和粗体。 

  <h3>Item 1</h3>
  <h3>Item 2</h3>
于 2019-12-05T21:53:35.257 回答
0

如果水平部分是使用 flexbox 制作的，那么一切都会神奇地开始工作。

.h-sect将样式更改为：

.h-sect{
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
}

和.h-child到：

.h-child{
  scroll-snap-align: center;
  flex: 0 0 auto;
  margin: 0;
  height: 100%;
  width: 100%;
  background: yellow;
}

以这种方式，所有元素都会像您期望的那样工作。完全没有异常行为。

于 2019-12-06T23:52:29.623 回答