Skip to content

Instantly share code, notes, and snippets.

@nocodesupplyco
Created November 26, 2022 14:43
Show Gist options
  • Save nocodesupplyco/bf25cda329216eedece19cb807c6108a to your computer and use it in GitHub Desktop.
Save nocodesupplyco/bf25cda329216eedece19cb807c6108a to your computer and use it in GitHub Desktop.
CSS Scroll Snap
/*Horizontal snap*/
.section {
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
}
.section > .picture {
scroll-snap-align: start;
}
/*Vertical snap*/
.section {
overflow-y: auto;
overscroll-behavior-x: contain;
scroll-snap-type: y mandatory;
}
.section > .picture {
scroll-snap-align: center;
}
/*Both direction snap*/
.section {
overflow: auto;
overscroll-behavior-x: contain;
scroll-snap-type: both mandatory;
}
.section > .picture {
scroll-snap-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment