From fcbc9f9a687826bd41983e5ea558b6b830e23dec Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 16 Oct 2024 23:10:45 -0700 Subject: [PATCH] scroll-snap-type: clarification (#36367) * scroll-snap-type * Update files/en-us/web/css/scroll-snap-type/index.md Co-authored-by: Chris Mills --------- Co-authored-by: Chris Mills --- files/en-us/web/css/scroll-snap-type/index.md | 69 ++++++++++--------- 1 file changed, 37 insertions(+), 32 deletions(-) diff --git a/files/en-us/web/css/scroll-snap-type/index.md b/files/en-us/web/css/scroll-snap-type/index.md index ffa3ba6ad387da2..0837d3476b462ec 100644 --- a/files/en-us/web/css/scroll-snap-type/index.md +++ b/files/en-us/web/css/scroll-snap-type/index.md @@ -7,10 +7,14 @@ browser-compat: css.properties.scroll-snap-type {{CSSRef}} -The **`scroll-snap-type`** [CSS](/en-US/docs/Web/CSS) property sets how strictly snap points are enforced on the scroll container in case there is one. +The **`scroll-snap-type`** [CSS](/en-US/docs/Web/CSS) property is set on a {{glossary("scroll container")}}, opting it into scroll snapping by setting the direction and strictness of snap point enforcement within the [snap port](/en-US/docs/Glossary/Scroll_snap#snapport). {{EmbedInteractiveExample("pages/css/scroll-snap-type.html")}} +If the content in the scroll port changes — for example, if content is added, moved, deleted, or resized — the scroll container will re-snap to the previously snapped content if that content is still present. + +If the value of a scroll snap-related property, such as `scroll-snap-type` or {{cssxref("scroll-margin")}}, is changed, the scroll container will re-snap based on the current value of `scroll-snap-type`. + Specifying any precise animations or physics used to enforce those snap points is not covered by this property but instead left up to the user agent. ## Syntax @@ -59,9 +63,6 @@ scroll-snap-type: unset; - `proximity` - : The visual viewport of this scroll container may snap to a snap position if it isn't currently scrolled. The user agent decides if it snaps or not based on scroll parameters. This is the default snap strictness if any snap axis is specified. -> [!NOTE] -> If the content in the snap port is changed (e.g. added, moved, deleted, or resized) or the value of any scroll snap-related property (e.g. `scroll-snap-type` or `scroll-margin`) is changed, the scroll container will be [resnapped](https://drafts.csswg.org/css-scroll-snap/#re-snap) according to the latest value of `scroll-snap-type`. - ## Formal definition {{CSSInfo}} @@ -77,90 +78,90 @@ scroll-snap-type: unset; #### HTML ```html -
-
+
+
X Mand. LTR
2
3
4
5
-
-
+ +
X Prox. LTR
2
3
4
5
-
-
+ +
Y Mand. LTR
2
3
4
5
-
-
+ +
Y Prox. LTR
2
3
4
5
-
-
+ +
X Mand. RTL
2
3
4
5
-
-
+ +
X Prox. RTL
2
3
4
5
-
-
+ +
Y Mand. RTL
2
3
4
5
-
-
+ +
Y Prox. RTL
2
3
4
5
-
-
+ + ``` #### CSS ```css hidden -.holster { +main { display: flex; align-items: center; justify-content: space-between; flex-flow: column nowrap; font-family: monospace; } -.container { +section { display: flex; margin: 1em auto; outline: 1px dashed lightgray; flex: none; overflow: auto; } -.container.x { +.x { width: 100%; height: 128px; flex-flow: row nowrap; overflow-y: hidden; } -.container.y { +.y { width: 256px; height: 256px; flex-flow: column nowrap; @@ -183,7 +184,7 @@ scroll-snap-type: unset; scroll-snap-type: y proximity; } -.container > div { +div { text-align: center; scroll-snap-align: center; flex: none; @@ -191,13 +192,13 @@ scroll-snap-type: unset; ``` ```css hidden -.x.container > div { +.x div { line-height: 128px; font-size: 64px; width: 100%; height: 128px; } -.y.container > div { +.y div { line-height: 256px; font-size: 128px; width: 256px; @@ -205,16 +206,16 @@ scroll-snap-type: unset; } /* appearance fixes */ -.y.container > div:first-child { +.y div:first-child { line-height: 1.3; font-size: 64px; } /* coloration */ -.container > div:nth-child(even) { +div:nth-child(even) { background-color: #87ea87; } -.container > div:nth-child(odd) { +div:nth-child(odd) { background-color: #87ccea; } ``` @@ -233,5 +234,9 @@ scroll-snap-type: unset; ## See also +- Other scroll port properties: {{cssxref("scroll-margin")}}, {{cssxref("scroll-padding")}} +- Scroll-child properties: {{cssxref("scroll-snap-align")}}, {{cssxref("scroll-margin")}}, {{cssxref("scroll-snap-stop")}} +- [Basic concepts of CSS scroll snap](/en-US/docs/Web/CSS/CSS_scroll_snap/Basic_concepts) +- [Using scroll snap events](/en-US/docs/Web/CSS/CSS_scroll_snap/Using_scroll_snap_events) - [CSS scroll snap](/en-US/docs/Web/CSS/CSS_scroll_snap) - [Well-controlled scrolling with CSS scroll snap](https://web.dev/articles/css-scroll-snap)