CODEWITHSUNDEEP
htmlcsshaskell-snap-framework
Brandon
Brandon

Reputation: 377

how is CSS scroll-snap specified, and it isn't working on firefox

I want to make some scroll snapping on each section. According to the docs, the container should have scroll-snap-type enabled,

and the direct child will be snapped to.

with the following code, how come it doesn't work. However, if i place on body {scroll-snap-type: y mandatory} it works..except only on chrome and safari.. firefox nightly seem to have problems.

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

Upvotes: 4

Views: 3098

Answers (1)

Sumit Patel
Sumit Patel

Reputation: 4638

You need update css as per below snippet more guideline are available on 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>

Upvotes: 3

Related Questions