Skip to content

Instantly share code, notes, and snippets.

@cliffordp
Created June 13, 2021 23:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cliffordp/f02927df7d5dd1ba5aae275b2177f047 to your computer and use it in GitHub Desktop.
Save cliffordp/f02927df7d5dd1ba5aae275b2177f047 to your computer and use it in GitHub Desktop.
Vertical scroll snapping full height container blocks in GeneratePress on WordPress
/* Reference: https://tourkick.com/?p=14005 */
html, body {
scroll-snap-type: y proximity;
}
@media (max-width: 1024px) {
html, body {
scroll-padding: 64px; /* Remove this if your mobile header nav hides upon scroll. */
}
}
@media (min-width: 1025px) {
html, body {
scroll-padding: 80px; /* If your desktop header nav is fixed. */
}
}
.scroll-snap { /* Add this class to your container's block settings. */
scroll-snap-align: start;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment