как указана CSS-прокрутка, и она не работает в Firefox - PullRequest
Новая
       30

как указана CSS-прокрутка, и она не работает в Firefox

3 голосов
/ 26 сентября 2019

Я хочу сделать несколько щелчков прокрутки в каждом разделе.Согласно документации, в контейнере должен быть включен scroll-snap-type,

, и прямой дочерний элемент будет привязан к.

со следующим кодом, почему он не работает.Тем не менее, если я помещаю его в тело {scroll-snap-type: y обязательный}, это работает .. за исключением только в 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>

1 Ответ

1 голос
/ 26 сентября 2019

Вам необходимо обновить 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>
...