CSS scroll-snap 是如何指定的，它在 firefox 上不起作用答案

【问题标题】：how is CSS scroll-snap specified, and it isn't working on firefoxCSS scroll-snap 是如何指定的，它在 firefox 上不起作用
【发布时间】：2020-01-26 07:12:21
【问题描述】：

我想在每个部分上进行一些滚动捕捉。根据文档，容器应该启用 scroll-snap-type，

直接子节点将被捕捉到。

用下面的代码，怎么不行。但是，如果我将它放在身体 {scroll-snap-type: y 强制} 它可以工作..除了仅在 chrome 和 safari 上.. firefox nightly 似乎有问题。

* {
    margin: 0;
}

div {

    scroll-snap-type: y mandatory;
}

section {
    scroll-snap-align: start;
    height: 100vh;
    border: 1px solid black;
    background-color: green;
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div>
        <section></section>
        <section></section>
        <section></section>
    </div>
</body>
</html>

【问题讨论】：

标签： html css haskell-snap-framework

【解决方案1】：

您需要按照以下 sn-p 更新 css 更多指南可在 developer.mozilla 上获得。

* {
  margin: 0;
}

div {
  scroll-snap-type: y mandatory;
  overflow: auto;
  outline: 1px dashed lightgray;
  flex: none;
  flex-flow: column nowrap;
  height: 100vh;
}

section {
  scroll-snap-align: start;
  height: 100vh;
  border: 1px solid black;
  background-color: green;
  flex: none;
}

<div>
  <section></section>
  <section></section>
  <section></section>
</div>

【讨论】：