Skip to content

Instantly share code, notes, and snippets.

@cliffordp
Created Jun 13, 2021
Embed
What would you like to do?
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