{"id":1897,"date":"2024-07-31T10:00:40","date_gmt":"2024-07-31T10:00:40","guid":{"rendered":"http:\/\/suimy.me\/?p=1897"},"modified":"2024-08-07T17:06:53","modified_gmt":"2024-08-07T17:06:53","slug":"snappy-scroll-with-css-scroll-snap","status":"publish","type":"post","link":"http:\/\/suimy.me\/index.php\/2024\/07\/31\/snappy-scroll-with-css-scroll-snap\/","title":{"rendered":"Snappy Scroll with CSS Scroll Snap"},"content":{"rendered":"
CSS Scroll Snap<\/strong> was introduced to allow you to define snap points for scrollable elements. It ensures that the scrolling lands precisely at the desired points. <\/p>\n This new CSS feature is especially useful for creating carousels, slideshows, or any layout where you want to control the user\u2019s scrolling experience. Let\u2019s see how it works.<\/p>\n The CSS Scroll Snap<\/strong> module introduces two main new properties to give us more control of the scrolling behavior:<\/p>\n First, let\u2019s say we want to create a horizontal carousel of images. We want each image to slide and immediately snap into place as we scroll it. First, we place the HTML, as follows:<\/p>\n As well as the styles.<\/p>\n In this example, we set the See the Pen Scroll Snap<\/a> by HONGKIAT (@hkdc<\/a>)on CodePen<\/a>.<\/span><\/p>\n To make it scroll vertically, we can simply set the Now, let\u2019s scroll vertically.<\/p>\n See the Pen Scroll Snap (Vertical)<\/a> by HONGKIAT (@hkdc<\/a>) on CodePen<\/a>.<\/span><\/p>\nNew Properties<\/h4>\n
\n
scroll-snap-type<\/code>: This property is applied to the container element to define the snapping behavior. It can be set to
x<\/code>,
y<\/code>, or
both<\/code> to specify the axis of snapping. It also takes a second argument which can be set to
mandatory<\/code> or
proximity<\/code>. The
mandatory<\/code> value forces the scroll to snap to the nearest snap point, while
proximity<\/code> allows the scroll to stop at any point within the snap area.<\/li>\n
scroll-snap-align<\/code>: This property is applied to the scrollable elements within the container to define the snap points. It can be set to
start<\/code>,
center<\/code>, or
end<\/code> to specify where the element should snap to the container. It can also be set to
none<\/code> to disable snapping for a specific element.<\/li>\n<\/ul>\n
Creating Carousel<\/h4>\n
\r\n<div class=\"carousel\">\r\n <div class=\"slide\">\r\n <img src=\"\/image-1.jpg\" width=\"600\" height=\"400\" \/>\r\n <\/div>\r\n <div class=\"slide\">\r\n <img src=\"\/image-2.jpg\" width=\"600\" height=\"400\" \/>\r\n <\/div>\r\n <div class=\"slide\">\r\n <img src=\"\/image-3.jpg\" width=\"600\" height=\"400\" \/>\r\n <\/div>\r\n <div class=\"slide\">\r\n <img src=\"\/image-4.jpg\" width=\"600\" height=\"400\" \/>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\n
\r\n.carousel {\r\n display: flex;\r\n overflow-x: scroll;\r\n scroll-snap-type: x mandatory;\r\n}\r\n\r\n.image {\r\n flex: 0 0 100%;\r\n scroll-snap-align: center;\r\n \r\n \/* Stylistic elements *\/\r\n width: 100%;\r\n height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 2rem;\r\n background-color: #dddddd;\r\n}\r\n<\/pre>\n
scroll-snap-type<\/code> property to
x mandatory<\/code> on the
.carousel<\/code> container, indicating that the scroll snapping should happen horizontally and be mandatory. We also set the
scroll-snap-align<\/code> property to
center<\/code> on the
.image<\/code> elements, meaning each image will snap to the center of the container as you scroll.<\/p>\n
scroll-snap-type<\/code> value to
y<\/code>, and change the direction of our Flex layout so each element would stack vertically.<\/p>\n
\r\n.carousel {\r\n display: flex;\r\n flex-direction: column;\r\n overflow-y: scroll;\r\n height: 100vh;\r\n scroll-snap-type: y mandatory;\r\n}\r\n\r\n\/* ...Remaining code... *\/\r\n<\/pre>\n
Browser Support<\/h4>\n