{"id":270,"date":"2025-03-04T17:12:36","date_gmt":"2025-03-04T17:12:36","guid":{"rendered":"https:\/\/emmab.uk\/blog\/?p=270"},"modified":"2025-03-07T16:04:25","modified_gmt":"2025-03-07T16:04:25","slug":"seminar-article","status":"publish","type":"post","link":"https:\/\/emmab.uk\/blog\/2025\/03\/04\/seminar-article\/","title":{"rendered":"CSS Scroll Snapping"},"content":{"rendered":"\n
\n

Welcome to my seminar tutorial, where I will I’ll be giving you all the information you need to use CSS scroll snapping in your websites, and improve your user’s experience. You can also view and download my powerpoint presentation here<\/a>.<\/p>\n\n\n\n

The basics<\/h2>\n<\/div><\/div>\n\n\n\n
What is CSS Scroll Snapping?<\/summary>\n

Scroll Snapping is a feature in CSS that allows you to lock the viewport to specific elements when scrolling. <\/p>\n\n\n\n

It helps improve the user experience by providing a smoother and predictable scrolling experience, specifically for users with motor impairments. <\/p>\n\n\n\n

It also ehances erformance optimisation by reducing reliance on JavaScript which shrinks the site size and improves page load times.<\/p>\n<\/details>\n\n\n\n

The Properties<\/h2>\n\n\n\n
The Key Properties<\/summary>\n
\n
\n
scroll-snap-type<\/strong>:\n\napplied the parent elements & controls scroll snapping behaviour\n\n<\/code><\/pre>\n<\/div>\n\n\n\n
\n
scroll-snap-align<\/strong>:\n\napplied to child elements & is used to determine the snap point (where the content should snap)\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
Each property has four different values with different effects:<\/p>\n\n\n\n
\n
\n
scroll-snap-type<\/strong>:\n\nX<\/strong> - horizontal snap\n\nY<\/strong> - vertical snap\n\nmandatory <\/strong>- forces content to snap at a specific point\n\npromixity<\/strong> - content will snap into place when close to the snap points\n<\/code><\/pre>\n<\/div>\n\n\n\n
\n
scroll-snap-align<\/strong>:\n\nstart<\/strong> - snaps at the start of the element\n\ncenter<\/strong> - snaps at the center of the element \n\nend<\/strong> - snaps at the end of the element \n\nnone<\/strong> - stops content from snapping into view<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
Note:<\/strong> you can pair the values X & Y with mandatory and\/or proximity (e.g., scroll-snap-type<\/strong>: y mandatory;)<\/p>\n<\/details>\n\n\n\n
\n
\n
The Additional Properties<\/summary>\n
\n
\n
scroll-padding:<\/strong>\n\nsets the padding within the scroll container<\/code><\/pre>\n<\/div>\n\n\n\n
\n
scroll-margin:<\/strong>\n\nadds space around the snap are<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
scroll-snap-stop<\/strong>:\n\nSpecifies whether the scroll container should force a snap on the next page (always)<\/strong> or the last page (none) <\/strong>when a user scrolls too fast. Useful for users on mobile devices.<\/code><\/pre>\n<\/div>\n<\/div>\n<\/details>\n<\/div><\/div>\n\n\n\n
Implementation<\/h2>\n\n\n\n
Step By Step Guide<\/summary>\n
Step 1: The HTML<\/h5>\n\n\n\n
To set up HTML for CSS Scroll Snap, you’ll need to create a container with child elements that will snap into place the user scrolls. Below is a simple example that demonstrates how to structure your HTML for a slideshow. If you already have your own HTML code, feel free to use it.<\/p>\n\n\n\n
\n
\n
<html>\n<section> \n  <h2>First slide<\/h2>\n<\/section>\n<section>\n  <h2>Second Slide<\/h2>\n<section>\n  <h2>Third slide<\/h2>\n<\/section>\n<\/html><\/code><\/pre>\n<\/div>\n\n\n\n
\n
In this example, <html> is the container element and <section>is the child element.<\/p>\n<\/div>\n<\/div>\n\n\n\n
Step 2: The CSS<\/h5>\n\n\n\n
Once your HTML is set up, it’s time to define your scoll snap type and your snap point.<\/p>\n\n\n\n
\n
\n
html{\n  scroll-snap-type<\/strong>:y mandatory;\n}<\/code><\/pre>\n<\/div>\n\n\n\n
\n
In this example, I am using ‘y mandatory’ as I want the content to force a snap on the y axis.<\/p>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
section {\n  scroll-snap-align:<\/strong>start;\n  scroll-snap-stop:<\/strong>always;\n}<\/code><\/pre>\n<\/div>\n\n\n\n
\n
I’ve used the value ‘start’ so that the snap point is at the start of every child element, and ‘always’ has been used to always take the user the next page when scrolling.<\/p>\n<\/div>\n<\/div>\n\n\n\n
Step 3:The Result<\/h5>\n\n\n\n
\n  See the Pen \n  css scroll snap 2<\/a> by Emmanuella Nziza (@Emmanuella-Nziza<\/a>)\n  on CodePen<\/a>.<\/span>\n<\/p>\n