CSS: scroll snap module

files/en-us/web/css/css_scroll_snap/basic_concepts/index.md

@@ -6,14 +6,22 @@ page-type: guide
 
 {{CSSRef}}
 
-The [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap) feature provides a way to snap the scrolling to certain points as the user scrolls through a document. This can be helpful in creating a more app-like experience on mobile or even on the desktop for some types of applications.
+The [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap) feature provides a way to snap the scrolling to certain points as the user scrolls through a document. This can help create a more app-like experience on mobile or even on the desktop for some types of applications.
+
+Scroll snap defines scroll snap positions, which enforce the scroll positions that a scroll container's {{Glossary("scrollport")}} may end at, or "snap to," after a scrolling operation has completed.
 
 ## Key properties for CSS Scroll Snap
 
+To enable scroll snapping, the scrolling behavior is defined on the scroll container. The container's {{cssxref("scroll-snap-type")}} property defines whether the scrollable viewport can be snapped to, the axis upon which the snapping occurs, and whether snapping is required or optional. To enable scrolling, the container should have a defined size and {{cssxref("overflow")}} must be enabled. There are optional {{cssxref("scroll-padding")}} properties that can be set on the scroll container to create a snapping offset.
+
+The {{cssxref("scroll-snap-align")}} property is set on every child of the scroll container, defining each child's snap position or lack thereof. The {{cssxref("scroll-snap-stop")}} property enables requiring that child is snapped to during scrolling and not passed over. Several {{cssxref("scroll-margin")}} properties can be set on the snapped-to-child elements to create an outset from the defined box.
+
 The key properties for the scroll snap feature are:
 
-- {{CSSxRef("scroll-snap-type")}}: This property is used on the [scroll container](/en-US/docs/Glossary/Scroll_container) to specify the type, direction, and optionality of scrolling.
-- {{CSSxRef("scroll-snap-align")}}: This property is used on child elements to specify the scroll snap position.
+- {{CSSxRef("scroll-snap-type")}}
+  - : Set on the [scroll container](/en-US/docs/Glossary/Scroll_container) to specify the type, direction, and optionality of scrolling.
+- {{CSSxRef("scroll-snap-align")}}: This property is used
+  - : Set on child elements to specify the scroll snap position.
 
 The example below demonstrates scroll snapping along the vertical axis, which is defined by `scroll-snap-type`. Additionally, `scroll-snap-align` is used on all the `<section>` element children dictating the point where the scrolling of each child should stop.
 
@@ -53,21 +61,21 @@ In the example below, `scroll-padding` is set to `40px`. When the content snaps
 
 {{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}
 
-This is potentially useful if you have a [fixed](/en-US/docs/Web/CSS/position#fixed_positioning) element, for example a navigation bar, which could end up overlapping scrolled content. By using `scroll-padding`, you can reserve a space for the fixed element, as shown in the example below, where the `<h1>` element remains on screen as the content scrolls beneath it. Without padding, the heading would overlap some of the content when snapping happens.
+This is potentially useful if you have a [fixed](/en-US/docs/Web/CSS/position#fixed_positioning) element, for example, a navigation bar, which could end up overlapping scrolled content. By using `scroll-padding`, you can reserve a space for the fixed element, as shown in the example below, where the `<h1>` element remains on screen as the content scrolls beneath it. Without padding, the heading would overlap some of the content when snapping happens.
 
 {{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}
 
 ## Using scroll-margin
 
-The {{CSSxRef("scroll-margin")}} property or the longhand scroll margin values can be set on child elements, essentially defining an outset from the defined box. This allows for different amounts of space for different child elements and can be used in conjunction with `scroll-padding` on the parent. Try this in the example below.
+The {{CSSxRef("scroll-margin")}} property or the longhand scroll margin values can be set on child elements, defining an outset from the defined box. This allows for different amounts of space for different child elements and can be used in conjunction with `scroll-padding` on the parent. Try this in the example below.
 
 {{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}
 
 ## Using scroll-snap-stop
 
-The {{CSSxRef("scroll-snap-stop")}} property tells the browser whether it should snap to each defined snap point — meaning that in our examples above we would stop at the start of each section — or be able to skip past sections.
+The {{CSSxRef("scroll-snap-stop")}} property tells the browser whether it must snap to defined snap points — meaning that in our examples above we would stop at the start of each section — or be able to skip past sections.
 
-It could be helpful in ensuring users see each section of the scroller and don't accidentally zip past them. However, it could be problematic in making the scrolling experience slower if the user is looking for a particular section.
+It can help ensure users see each section of the scroller and don't accidentally scroll past them. However, it can negatively affect user experience by preventing the user from quickly scrolling to their desired content.
 
 ## See also
 

files/en-us/web/css/css_scroll_snap/index.md

@@ -7,15 +7,21 @@ spec-urls: https://drafts.csswg.org/css-scroll-snap/
 
 {{CSSRef}}
 
-**CSS Scroll Snap** is a module of CSS that contains features to control panning and scrolling behavior with snap positions.
+The **CSS scroll snap** module contains features to control panning and scrolling behavior with snap positions. Scroll snap properties can be used to define the location of a scroll container's scrollport as users scroll thru content. Content can be snapped into position as the user scrolls overflowing content within a {{Glossary("scroll container")}}, providing paging and scroll positioning.
 
-## Key concepts
+This module includes the scroll container scroll-padding properties to adjust the optimal viewing region of paging during scroll-into-view operations. It also includes scroll-margin and scroll-alignment properties, set on the scroll container's children, to adjust the children's visual area when that child is scrolled into view.
 
-CSS scroll snap enables snapping content as the user scrolls overflowing content within a {{Glossary("scroll container")}}. Scroll snap introduces scroll snap positions, which enforce the scroll positions that a scroll container's {{Glossary("scrollport")}} may end at after a scrolling operation has completed.
+## Scroll snap in action
 
-To enable scroll snapping, the scrolling behavior is defined on the scroll container. The container's {{cssxref("scroll-snap-type")}} property defines whether the scrollable viewport can be snapped to, the axis upon which the snapping occurs, and whether snapping is required or optional. To enable scrolling, the container should have a defined size and {{cssxref("overflow")}} must be enabled. There are optional {{cssxref("scroll-padding")}} properties that can be set on the scroll container to create a snapping offset.
+To view scroll snapping in the box below, scroll up-and-down and left-and-right through the grid of 45 numbered boxes in the scrollable viewport.
 
-The {{cssxref("scroll-snap-align")}} property is set on every child of the scroll container, defining each child's snap position or lack thereof. The {{cssxref("scroll-snap-stop")}} property enables requiring that child is snapped to during scrolling and not passed over. There are several {{cssxref("scroll-margin")}} properties that can be set on the snapped-to child elements to create an outset from the defined box.
+{{EmbedGHLiveSample("css-examples/modules/scroll_snap.html", '100%', 250)}}
+
+With scroll snap, one of the numbered boxes, the one you scrolled to, will snap into place. The hard-coded CSS makes the numbered box snap into the center of the viewport. Use the sliders to switch the block and inline snap position.
+
+Snap properties enable allowing or blocking a user from scrolling past element. Check the "Stop on all boxes" to force all scrolling actions to be limited to scrolling to the next box.
+
+To compare scroll snapping to regular scrolling, check the "disable snapping" box and try scrolling again.
 
 ## Reference
 
@@ -57,15 +63,31 @@ The {{cssxref("scroll-snap-align")}} property is set on every child of the scrol
 
 ## Guides
 
-- [Basic concepts of CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts)
+- [Basic concepts of CSS scroll snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts)
+  - : An overview and examples of CSS scroll snap features.
+
+## Related concepts
+
+- {{cssxref(":target")}} pseudo-class
+- {{cssxref("overflow")}} CSS property
+- Element {{domxref("Element.scroll", "scroll()")}} method
+- Element {{domxref("Element.scrollBy", "scrollBy()")}} method
+- Element {{domxref("Element.scrollIntoView", "scrollIntoView()")}} method
+- Element {{domxref("Element.scrollTo", "scrollTo()")}} method
+- Document {{domxref("Document.scroll_event", "scroll")}} event
+- [`scrollbar`](/en-US/docs/Web/Accessibility/ARIA/Roles/scrollbar_role) ARIA role
+- {{Glossary("Scroll container")}} glossary term
 
 ## Specifications
 
 {{Specifications}}
 
 ## See also
 
+- [CSS overflow](/en-US/docs/Web/CSS/CSS_Overflow) module
+- [CSS scrollbars style](/en-US/docs/Web/CSS/CSS_Scrollbars) module
 - [Well-controlled scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)
 - [Practical CSS scroll snapping/](https://css-tricks.com/practical-css-scroll-snapping/)
 - [CSS Scroll Snap](https://12daysofweb.dev/2022/css-scroll-snap/)
 - [Scroll snap examples on Codepen](https://codepen.io/collection/KpqBGW)
+- [Keyboard-only scrolling areas](https://adrianroselli.com/2022/06/keyboard-only-scrolling-areas.html) on adrianroselli.com (November 28, 2022)