Created
November 27, 2025 10:45
-
-
Save bramus/94b0e1420727480c81e6fbacf556e93d to your computer and use it in GitHub Desktop.
Set the initial scroll offset of a scrollable container with `scroll-initial-target`
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
| /* scroll-initial-target will start on the | |
| * middle child without the following animation hack */ | |
| :nth-child(2) { scroll-initial-target: auto; } | |
| /* Hack to start snapped to the middle */ | |
| @keyframes no-initial-snap { | |
| from: scroll-snap-align: none; | |
| } | |
| @supports not (scroll-initial-target: auto) { | |
| :nth-child(1) { | |
| /* 1st child initially doesn't snap */ | |
| animation: no-initial-snap 0.0001s; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment