{"id":367283,"date":"2022-08-05T06:10:09","date_gmt":"2022-08-05T13:10:09","guid":{"rendered":"https:\/\/css-tricks.com\/?p=367283"},"modified":"2022-08-05T06:10:10","modified_gmt":"2022-08-05T13:10:10","slug":"how-i-added-scroll-snapping-to-my-twitter-timeline","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-i-added-scroll-snapping-to-my-twitter-timeline\/","title":{"rendered":"How I Added Scroll Snapping To My Twitter Timeline"},"content":{"rendered":"\n

CSS Scroll Snap<\/a> allows websites to snap the web page or any other scroll container to a specific scroll position when the user performs a scrolling operation. This feature has been supported in all modern browsers<\/a> for over two years, but many websites that could benefit from it are still not using it.<\/p>\n\n\n\n

Scroll snapping is probably most associated with horizontal carousels (see Chris\u2019s CSS-only approach<\/a>) and particular web pages divided into full-screen slides. But why stop there? I believe that snapping can improve the scrolling experience on any web page that lays out items in a grid or feed.<\/p>\n\n\n\n\n\n\n\n

For example, most shopping websites show products in a grid. Ideally, the user would like to jump between the grid rows with minimal effort. The user can press Space<\/kbd> to scroll the page by roughly one screen (viewport height), but depending on the height of the grid rows, the scroll position will eventually get \u201cout of sync\u201d with the grid, and the user will have to re-adjust it manually.<\/p>\n\n\n\n

\n