This snippet<\/a> covers how it works. <\/p>\n","protected":false},"excerpt":{"rendered":"Two of the CSS properties most lamented by mobile website developers is fixed positioning and scrolling overflow. These are absent for a reason. Poorly implemented, they might single-handedly render a website unusable on a small screen. (Imagine a giant fixed position header that hides all the content, or being zoomed into a small scrollable area […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":288479,"url":"https:\/\/css-tricks.com\/prevent-page-scrolling-when-a-modal-is-open\/","url_meta":{"origin":13246,"position":0},"title":"Prevent Page Scrolling When a Modal is Open","date":"June 3, 2019","format":false,"excerpt":"Please stop me if you've heard this one before. You open a modal, scroll through it, close it, and wind up somewhere else on the page than you were when you opened the modal. That's because modals are elements on a page just like any other. It may stay in\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/scrollbar-gutter.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":283534,"url":"https:\/\/css-tricks.com\/dealing-with-overflow-and-position-sticky\/","url_meta":{"origin":13246,"position":1},"title":"Dealing with overflow and position: sticky;","date":"February 25, 2019","format":false,"excerpt":"Any overflow value other than visible and no height is the enemy of child elements with position: sticky;. It's like that element is ready to stick when the parent scrolls, but it never does because the height is unconstrained. Adding a fixed height can solve the issue, but that's not\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/sticky-calendar.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":367270,"url":"https:\/\/css-tricks.com\/scroll-shadows-pure-css-parallax-game-back-on\/","url_meta":{"origin":13246,"position":2},"title":"Scroll Shadows? Pure CSS Parallax? Game Back On.","date":"July 29, 2022","format":false,"excerpt":"Chris calls scroll shadows one his favorite CSS-Tricks of all time. Lea Verou popularized the pure CSS approach using four layered background gradients with some clever background-attachment magic. The result is a slick scrolling interaction that gives users a hint that additional content is available in a scrollable container. CodePen\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/smooth-scroll.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":312174,"url":"https:\/\/css-tricks.com\/the-trickery-it-takes-to-create-ebook-like-text-columns\/","url_meta":{"origin":13246,"position":3},"title":"The Trickery it Takes to Create eBook-Like Text Columns","date":"June 8, 2020","format":false,"excerpt":"There's some interesting CSS trickery in Jason Pamental's latest Web Fonts & Typography News. Jason wanted to bring swipeable columns to his digital book experience on mobile. Which brings up an interesting question right away... how do you set full-width columns that add columns horizontally, as-needed ? Well that's a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/pamental-swipeable-columns.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333608,"url":"https:\/\/css-tricks.com\/going-from-solid-to-knockout-text-on-scroll\/","url_meta":{"origin":13246,"position":4},"title":"Going From Solid to Knockout Text on Scroll","date":"February 3, 2021","format":false,"excerpt":"Here\u2019s a fun CSS trick to show your friends: a large title that switches from a solid color to knockout text as the background image behind it scrolls into place. And we can do it using plain ol\u2019 HTML and CSS! This effect is created by rendering two containers with\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/solid-knockout-text.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":311390,"url":"https:\/\/css-tricks.com\/a-new-direction-in-the-struggle-against-rightward-scrolling\/","url_meta":{"origin":13246,"position":5},"title":"A \u201cnew direction\u201d in the struggle against rightward scrolling","date":"May 21, 2020","format":false,"excerpt":"You know those times you get a horizontal scrollbar when accidentally placing an element off the right edge of the browser window? It might be a menu that slides in or the like. Sometimes we to overflow-x: hidden; on the body to fix that, but that can sometimes wreck stuff\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/overflow.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/13246"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=13246"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/13246\/revisions"}],"predecessor-version":[{"id":183423,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/13246\/revisions\/183423"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=13246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=13246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=13246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}