Use native scrolling instead of iscroll

src/js/controller/mail-list.js

@@ -273,12 +273,12 @@ define(function(require) {
 
     var ngModule = angular.module('mail-list', []);
 
-    ngModule.directive('ngIscroll', function($timeout) {
+    ngModule.directive('listScroll', function() {
         return {
             link: function(scope, elm, attrs) {
-                var model = attrs.ngIscroll,
+                var model = attrs.listScroll,
                     listEl = elm[0],
-                    myScroll;
+                    scrollTimeout;
 
                 /*
                  * iterates over the mails in the mail list and loads their bodies if they are visible in the viewport
@@ -320,20 +320,19 @@ define(function(require) {
                     }
                 };
 
-                // activate iscroll
-                myScroll = new IScroll(listEl, {
-                    mouseWheel: true,
-                    scrollbars: true,
-                    fadeScrollbars: true
-                });
-                myScroll.on('scrollEnd', scope.loadVisibleBodies);
+                // load body when scrolling
+                listEl.onscroll = function() {
+                    if (scrollTimeout) {
+                        // remove timeout so that only scroll end
+                        clearTimeout(scrollTimeout);
+                    }
+                    scrollTimeout = setTimeout(function() {
+                        scope.loadVisibleBodies();
+                    }, 300);
+                };
 
-                // refresh iScroll when model length changes
+                // load the visible message bodies, when the list is re-initialized and when scrolling stopped
                 scope.$watchCollection(model, function() {
-                    $timeout(function() {
-                        myScroll.refresh();
-                    });
-                    // load the visible message bodies, when the list is re-initialized and when scrolling stopped
                     scope.loadVisibleBodies();
                 });
             }

src/sass/_scaffolding.scss

@@ -40,7 +40,7 @@ textarea {
 // Custom scrollbars in webkit
 // @see http://css-tricks.com/custom-scrollbars-in-webkit/
 ::-webkit-scrollbar {
-    width: 10px;
+    width: $scrollbar-width;
 }
 ::-webkit-scrollbar-track {
     background: transparent;

src/sass/_variables.scss

@@ -43,6 +43,8 @@ $time-li-fade:                      0.15s;
 // Components
 // -------------------------------------------
 
+$scrollbar-width:                   10px;
+
 $nav-max-width:                     347px;
 $nav-width:                         80%;
 $nav-padding:                       15px;

src/sass/views/_mail-list.scss

@@ -46,8 +46,8 @@
 
     .list-wrapper {
         flex-grow: 1;
-        padding: 0 $padding-horizontal;
-        overflow-y: hidden;
+        padding: 0 ($padding-horizontal - $scrollbar-width) 0 $padding-horizontal;
+        overflow-y: scroll;
     }
 
     footer {

src/tpl/mail-list.html

@@ -9,7 +9,7 @@
     <input class="input-text input-search" type="search" results="5" ng-model="searchText" placeholder=" Filter..." focus-me="state.mailList.searching">
   </div>
 
-  <div class="list-wrapper" ng-iscroll="filteredMessages">
+  <div class="list-wrapper" list-scroll="filteredMessages">
     <ul class="mail-list">
       <li ng-class="{'mail-list-active': email === state.mailList.selected}" ng-click="select(email)" ng-repeat="email in (filteredMessages = (state.nav.currentFolder.messages | filter:searchText | orderBy:'uid':true | limitTo:100))">
         <h3>{{email.from[0].name || email.from[0].address}}</h3>