文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS scroll-snap是如何指定的，它在firefox上不起作用

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

Stack Overflow用户

提问于 2019-09-26 12:14:21

回答 1查看 1.4K关注 0票数 4

我想在每个部分上做一些滚动快照。根据文档，容器需要开启scroll-snap-type，

并且直接的子级将被捕捉到。

使用下面的代码，为什么它不能工作。但是，如果我放在正文{ works..except -snap-type:y works..except}上，它只能在chrome和safari上滚动。firefox每晚似乎都有问题。

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

Stack Overflow用户

发布于 2019-09-26 13:01:31

你需要按照下面的代码片段更新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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58109477

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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