Web pages on iOS by default have a “momentum” style scrolling where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping as if friction is slowing it down. Like if you were to push a hockey puck across the ice or something. You might think that any element with scrolling would have this behavior as well, but it doesn’t. You can add it back with a special property.<\/p>\n
.module {\r\n width: 300px;\r\n height: 200px;\r\n\r\n overflow-y: scroll; \/* has to be scroll, not auto *\/\r\n -webkit-overflow-scrolling: touch;\r\n}<\/code><\/pre>\n<\/code>Check out this Pen!<\/a><\/pre>\n","protected":false},"excerpt":{"rendered":"Web pages on iOS by default have a “momentum” style scrolling where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping as if friction is slowing it down. Like if you were to push a hockey puck across the ice or something. You might […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3222,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","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":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":14081,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow\/","url_meta":{"origin":21524,"position":0},"title":"overflow","date":"September 5, 2011","format":false,"excerpt":"The overflow property controls what happens to content that breaks outside of its bounds: imagine a div in which you've explicitly set to be 200px wide, but contains an image that is 300px wide. That image will stick out of the div and be visible by default. Whereas if you\u2026","rel":"","context":"In \"overflow\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/overflow-visible.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":283666,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overscroll-behavior\/","url_meta":{"origin":21524,"position":1},"title":"overscroll-behavior","date":"September 14, 2021","format":false,"excerpt":"The overscroll-behavior CSS property controls whether an element will use \u201cscroll chaining\u201d or not. You have likely experienced this behavior before and perhaps took it for granted that scrolling works like this on the web! If you are inside of an element that has its own scrolling (say it\u2019s vertical)\u2026","rel":"","context":"In \"overflow\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/overflow.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":253758,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-behavior\/","url_meta":{"origin":21524,"position":2},"title":"scroll-behavior","date":"April 18, 2017","format":false,"excerpt":"The scroll-behavior property in CSS allows us to define whether the scroll location of the browser jumps to a new location or smoothly animates the transition when a user clicks a link that targets an anchored position within a scrolling box. html { scroll-behavior: smooth; } Deeper Explanation Wait, wait,\u2026","rel":"","context":"In \"scroll-behavior\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":253679,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow-anchor\/","url_meta":{"origin":21524,"position":3},"title":"overflow-anchor","date":"April 14, 2017","format":false,"excerpt":"The overflow-anchor property enables us to opt out of Scroll Anchoring, which is a browser feature intended to allow content to load above the user's current DOM location without changing the user's location once that content has been fully loaded. Why We Need It Scroll Anchoring is a browser feature\u2026","rel":"","context":"In \"overflow-anchor\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3770,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/smooth-scrolling\/","url_meta":{"origin":21524,"position":4},"title":"Smooth Scrolling","date":"September 4, 2009","format":false,"excerpt":"Hey! Before you go too far down the rabbit hole of JavaScript-based smooth scrolling, know that there is a native CSS feature for this: scroll-behavior. html { scroll-behavior: smooth; } And before you reach for a library like jQuery to help, there is also a native JavaScript version of smooth\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":278429,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scrollbar-gutter\/","url_meta":{"origin":21524,"position":5},"title":"scrollbar-gutter","date":"November 9, 2018","format":false,"excerpt":"The scrollbar-gutter property in CSS provides flexibility to determine how the space the browser uses to display a scrollbar that interacts with the content on the screen. The spec describes it as \"reserving space for the scrollbar\". The beauty of this is that now we can make sure: Content doesn't\u2026","rel":"","context":"In \"scrollbars\"","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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21524"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"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=21524"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21524\/revisions"}],"predecessor-version":[{"id":198182,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21524\/revisions\/198182"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3222"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=21524"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=21524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}