scroll-snap-type 不起作用，我该如何解决？答案

【问题标题】：scroll-snap-type doesn't work, How can I fix it?scroll-snap-type 不起作用，我该如何解决？
【发布时间】：2021-08-21 00:58:34
【问题描述】：

我的意思是，它最初的工作方式是向下滚动的，就像没有滚动捕捉选项一样。为什么？

html代码如下：

<body>
    <noscript>~~</noscript>
    <div id="background"></div>
    <header>
        <nav><a href="/"><img src="~~" alt="To Mainpage"></a></nav>
        <nav>
            <ul>
                <li><a href="/">~~</a></li>
                <li><a href="/">~~</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div id="container">
            <section id="first">
                <h1>~~</h1>
                <article>~~</article>
            </section>
            <section id="second"></section>
        </div>
    </main>
</body>

和下面的CSS代码：

#container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
}

#container > section {
    height: 100vh;
    scroll-snap-align: start;
}

【问题讨论】：

标签： html css scroll-snap-type

【解决方案1】：

确保给你的父容器一个高度值，如下例所示。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#container {
    display: flex;
    overflow: auto;
    outline: 1px dashed lightgray;
    flex: none;
    width: 100%;
    height: 100vh;
    flex-flow: column nowrap;
    scroll-snap-type: y mandatory;
}

#container > section {
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    flex: none;
}

#first, #third {
  background: #ccc;
}

#second, #fourth {
  background: red;
}

<div id="container">
  <section id="first"></section>
  <section id="second"></section>
  <section id="third"></section>
  <section id="fourth"></section>
</div>

【讨论】：

非常感谢！最后它起作用了。无论如何，“位置：相对”选项与该理论相关吗？