{"id":477,"date":"2015-05-11T19:06:02","date_gmt":"2015-05-11T19:06:02","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=477"},"modified":"2015-12-16T19:36:39","modified_gmt":"2015-12-16T19:36:39","slug":"native-scrolling-in-ionic-a-tale-in-rhyme","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme","title":{"rendered":"Native Scrolling in Ionic: A Tale in Rhyme"},"content":{"rendered":"\n

\"nativescroll-header\"

\"intro-o\"

\u201cScrolling’s complicated,\u201d he stated. \u201cThe reasons to avoid JS scrolling have faded.\u201d So JS scrolling was enabled, and the features it allowed were fabled. It appeared JS scrolling was underrated.
\n<\/p>\n

Javascript scrolling had saved the day, and it lifted Ionic above the fray. But as the project quickly grew, its developers truly knew the reasons for JS scrolling would fall away.<\/p>\n

As iOS and Android matured, native scrolling events were assured. \u201cThe time has come,\u201d the Web Wizard said, \u201cfor native scrolling now to spread. A new functionality must be procured.\u201d<\/p>\n

Pull to Refresh; List Reordering; Infinite Scroll: All were configured to meet this goal. Even the $ionicScrollDelegate was carefully made to relegate itself to optional native scroll view control.<\/p>\n

Once these changes were complete, there appeared a problem with collection-repeat. After conducting an investigation, the necessary changes caused frustration; they totaled JS scrolling nearly complete.<\/p>\n

The solution that was committed was for JS scrolling to be permitted. Collection repeat would trigger Javascript scrolling to rigor, and native scrolling would be acquitted.<\/p>\n

It is now my privilege to announce native scrolling\u2019s time to pounce. For the devices that support it, you no longer must port it. Yes, it even has that native bounce!<\/em><\/p>\n

The Real Story<\/h3>\n

Ionic was created in the fall of 2013, which by all accounts is just year and a half ago. But in mobile web time, it was a generation ago! Back then, iOS 6 still had dominant market share, and Android 2.3 demanded support.<\/p>\n

Among other things, those browsers lacked proper scroll events. This meant that to pull off features like pull to refresh and infinite scrolling, JS scrolling would be required. Once we added it, we found we were also able to do things like list reordering and even collection-repeat.<\/p>\n

Javascript scrolling has worked very well for Ionic, enabling us to do things that were simply impossible without it. It does use up a significant amount of processor time, though, and it requires that a lot of native functionality around touch events and input element behavior be reworked. In some ways, it’s been both a blessing and a curse.<\/p>\n

However, Android 4.1+ supports native scroll events, and now with Lollipop and chromium webviews, those scroll events are asynchronous and won’t interrupt the smooth display of scrolling behavior. It\u2019s an exciting time for scroll events in Android!<\/p>\n

On the other hand, iOS is a bit of a different story. With iOS 8, Apple introduced WkWebView, which includes native scroll events. The one<\/em> problem, though, is in iOS 8 Beta 3, WkWebView\u2019s support for the file protocol broke and was never fixed. That meant that Cordova was stuck using the UIWebView that had been mostly unchanged since iOS 7, which lacked complete native scroll events.<\/p>\n

One popular solution is to bind to touchmove events and create fake scroll events. This works nicely, until the user lets go, and iOS\u2019s inertia scrolling takes over. We were able to accurately recreate Apple\u2019s inertia formula but unable to get a consistently accurate read of the velocity that that equation depends on, because that\u2019s determined in native land. We\u2019re only provided occasional touchmove events to guess. Turns out 18ms is a long time when it comes to determining accurate velocity, and our best tests still had a 30% margin of error.<\/p>\n

This means that iOS, for the time being, still requires JS scrolling. Android, however, gets to enjoy Ionic\u2019s new native scrolling support. Pull to Refresh, Infinite Scrolling, List Reordering, and the $ionicScrollDelegate<\/code> all work with native scrolling now!<\/p>\n

One important caveat is that because of how collection-repeat works, it requires rapidly shifting the scroll content, hijacking the scroll behavior, and recreating the scrollbar. That\u2019s pretty much JS scrolling, so we set it so that collection-repeat will force an ion-content to use JS scrolling.<\/p>\n

Native scrolling can be enabled using overflow-scroll=\u201dtrue\u201d<\/code> on your ion-content<\/code> or using the $ionicConfigProvider<\/code> to set it globally in current versions of Ionic. We want to let it be a bit more battle tested before making it the default in Android, but give it a shot in the current nightly and let us know how it\u2019s working for you!<\/p>\n","protected":false},"excerpt":{"rendered":"

nce upon a time, the Web Wizard was befuddled. \u201cHow can I add scroll-based features without scrolling events?\u201d he muddled. Try as he might, he couldn\u2019t get fake events right, so he called his advisors together for a huddle. \u201cScrolling’s complicated,\u201d he stated. \u201cThe reasons to avoid JS scrolling have faded.\u201d So JS scrolling was […]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3],"class_list":["post-477","post","type-post","status-publish","format-standard","hentry","category-all","tag-ionic"],"acf":[],"yoast_head":"\nNative Scrolling in Ionic: A Tale in Rhyme - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Native Scrolling in Ionic: A Tale in Rhyme\" \/>\n<meta property=\"og:description\" content=\"nce upon a time, the Web Wizard was befuddled. \u201cHow can I add scroll-based features without scrolling events?\u201d he muddled. Try as he might, he couldn\u2019t get fake events right, so he called his advisors together for a huddle. \u201cScrolling’s complicated,\u201d he stated. \u201cThe reasons to avoid JS scrolling have faded.\u201d So JS scrolling was […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-11T19:06:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-12-16T19:36:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/05\/nativescroll-header.png\" \/>\n<meta name=\"author\" content=\"Perry Govier\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@perrygovier\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Perry Govier\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme\"},\"author\":{\"name\":\"Perry Govier\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/334835947923089c1454927a5a38f23f\"},\"headline\":\"Native Scrolling in Ionic: A Tale in Rhyme\",\"datePublished\":\"2015-05-11T19:06:02+00:00\",\"dateModified\":\"2015-12-16T19:36:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme\"},\"wordCount\":741,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/05\/nativescroll-header.png\",\"keywords\":[\"Ionic\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme\",\"url\":\"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme\",\"name\":\"Native Scrolling in Ionic: A Tale in Rhyme - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/05\/nativescroll-header.png\",\"datePublished\":\"2015-05-11T19:06:02+00:00\",\"dateModified\":\"2015-12-16T19:36:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/05\/nativescroll-header.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/05\/nativescroll-header.png\",\"width\":1400,\"height\":758},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Native Scrolling in Ionic: A Tale in Rhyme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/334835947923089c1454927a5a38f23f\",\"name\":\"Perry Govier\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3fd01a6c7ec7e28809878ae870bceb183d966805efea46bc5ff6ec99493c2eab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3fd01a6c7ec7e28809878ae870bceb183d966805efea46bc5ff6ec99493c2eab?s=96&d=mm&r=g\",\"caption\":\"Perry Govier\"},\"sameAs\":[\"https:\/\/twitter.com\/perrygovier\",\"https:\/\/x.com\/perrygovier\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/perry\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Native Scrolling in Ionic: A Tale in Rhyme - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme","og_locale":"en_US","og_type":"article","og_title":"Native Scrolling in Ionic: A Tale in Rhyme","og_description":"nce upon a time, the Web Wizard was befuddled. \u201cHow can I add scroll-based features without scrolling events?\u201d he muddled. Try as he might, he couldn\u2019t get fake events right, so he called his advisors together for a huddle. \u201cScrolling’s complicated,\u201d he stated. \u201cThe reasons to avoid JS scrolling have faded.\u201d So JS scrolling was […]","og_url":"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme","og_site_name":"Ionic Blog","article_published_time":"2015-05-11T19:06:02+00:00","article_modified_time":"2015-12-16T19:36:39+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/05\/nativescroll-header.png"}],"author":"Perry Govier","twitter_card":"summary_large_image","twitter_creator":"@perrygovier","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Perry Govier","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme"},"author":{"name":"Perry Govier","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/334835947923089c1454927a5a38f23f"},"headline":"Native Scrolling in Ionic: A Tale in Rhyme","datePublished":"2015-05-11T19:06:02+00:00","dateModified":"2015-12-16T19:36:39+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme"},"wordCount":741,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/05\/nativescroll-header.png","keywords":["Ionic"],"articleSection":["All"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme","url":"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme","name":"Native Scrolling in Ionic: A Tale in Rhyme - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/05\/nativescroll-header.png","datePublished":"2015-05-11T19:06:02+00:00","dateModified":"2015-12-16T19:36:39+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/05\/nativescroll-header.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/05\/nativescroll-header.png","width":1400,"height":758},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/native-scrolling-in-ionic-a-tale-in-rhyme#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Native Scrolling in Ionic: A Tale in Rhyme"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/334835947923089c1454927a5a38f23f","name":"Perry Govier","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3fd01a6c7ec7e28809878ae870bceb183d966805efea46bc5ff6ec99493c2eab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3fd01a6c7ec7e28809878ae870bceb183d966805efea46bc5ff6ec99493c2eab?s=96&d=mm&r=g","caption":"Perry Govier"},"sameAs":["https:\/\/twitter.com\/perrygovier","https:\/\/x.com\/perrygovier"],"url":"https:\/\/ionic.io\/blog\/author\/perry"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=477"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/477\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}