Created
July 10, 2025 06:56
-
-
Save kinjouj/f8d09c3251b67695543f80d33efcd4fa to your computer and use it in GitHub Desktop.
scroll-snap-type
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="./style.css" /> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="box1" class="box bg-1">box1</div> | |
| <div id="box2" class="box bg-2">box2</div> | |
| <div id="box3" class="box bg-3">box3</div> | |
| <div id="box4" class="box bg-4">box4</div> | |
| <div id="box5" class="box bg-5">box5</div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body { | |
| margin: 0; | |
| } | |
| #container { | |
| overflow: auto; | |
| width: 100vw; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| scroll-snap-type: y mandatory; | |
| scrollbar-width: none; | |
| -ms-overflow-style: none; | |
| } | |
| #container::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .box { | |
| width: 100vw; | |
| min-height: 100vh; | |
| align-content: center; | |
| text-align: center; | |
| scroll-snap-align: start; | |
| font-size: 3em; | |
| font-weight: bold; | |
| } | |
| .bg-1 { | |
| background-color: black; | |
| color: white; | |
| } | |
| .bg-2 { | |
| background-color: darkred; | |
| color: white; | |
| } | |
| .bg-3 { | |
| background-color: darkgreen; | |
| color: white; | |
| } | |
| .bg-4 { | |
| background-color: darkorange; | |
| color: white; | |
| } | |
| .bg-5 { | |
| background-color: midnightblue; | |
| color: white; | |
| } |
Comments are disabled for this gist.