时间戳

首页 > 解决方案 > CSS scroll-snap 是如何指定的，它在 firefox 上不起作用

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

问题描述

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

直接孩子将被抢购。

使用以下代码，它怎么不起作用。但是，如果我将它放在身体 {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>

标签： htmlcsshaskell-snap-framework

解决方案

您需要按照以下代码片段更新 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>

推荐阅读