scroll-snap-type: clarification #36367
Conversation
github-actions
bot
added
Content:CSS
|
Preview URLs Flaws (1)URL:
(comment last updated: 2024-10-17 06:10:29) |
There was a problem hiding this comment.
@estelle nice work. Just a couple of bits for you to look at here.
| @@ -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). | |||
There was a problem hiding this comment.
The link text should be scroll port, and the URL should be https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container#scrollport, right?
There was a problem hiding this comment.
there's a new glossary coming out soon. #36300
| @@ -77,90 +78,90 @@ scroll-snap-type: unset; | |||
| #### HTML | |||
|
|
|||
| ```html | |||
| <div class="holster"> | |||
| <div class="container x mandatory-scroll-snapping" dir="ltr"> | |||
| <main> | |||
There was a problem hiding this comment.
The HTML and CSS is much cleaner now. I do wonder about the value of having 4 vertical examples — LTR/RTL has basically no effect on vertical scrollers, except to make the scrollbar appear on the other side of the container. Is this worth demonstrating? I wonder whether people will be confused and think that there is something more to it.
Instead, would it be a bit more intuitive to show the 4 horizontal examples first, and then just show two vertical examples labeled "Y Mand." and "Y Prox."?
I'm not 100% sure about this; whatever you decide is good.
There was a problem hiding this comment.
i'll shrink it in a next PR. I'll be revisiting all these pages after #36300 is merged
Co-authored-by: Chris Mills <[email protected]>
Added link to new guide; (We should alsow add events and their inline/block directions with an explanation, but waiting a bit to when that is a little better supported)
This property defines the element as a snap port, so added that,
add link to glossary entry, which is in #36300.
updated the HTML and CSS to reduce class names, hopefully making it easier to mentally parse.