andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update snippet wording

Browse Source
This commit is contained in:
Isabelle Viktoria Maciohsek
2021-10-11 18:38:06 +03:00
committed by Chalarangelo
parent b137bd7d75
commit ee00c20cc3
12 changed files with 44 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
snippets/horizontal-scroll-snap.md
View File

@ -2,14 +2,14 @@
title: Horizontal scroll snap
tags: interactivity,intermediate
firstSeen: 2020-08-18T14:25:46+03:00
lastUpdated: 2020-12-30T15:37:37+02:00
lastUpdated: 2021-10-11T18:44:51+03:00
---
Creates a horizontally scrollable container that will snap on elements when scrolling.
- Use `display: grid` and `grid-auto-flow: column` to create a horizontal layout.
- Use `scroll-snap-type: x mandatory` and `overscroll-behavior-x: contain` to create a snap effect on horizontal scroll.
- You can use `scroll-snap-align` with either `start`, `stop` or `center` to change the snap alignment.
- Change `scroll-snap-align` to either `start`, `stop` or `center` to change the snap alignment.
```html
<div class="horizontal-snap">