Throttle scroll events. Optimize scroll performance

SC5 · Jun 16, 2015 · c1f674a · c1f674a
1 parent cf2e72d
commit c1f674a
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git a/bower.json b/bower.json
@@ -12,7 +12,8 @@
     "oclazyload": "0.3.8",
     "ngprogress": "~1.0.7",
     "angular-debounce": "~1.0.0",
-    "angular-scroll": "0.7.0"
+    "angular-scroll": "0.7.0",
+    "lodash": "~3.9.3"
   },
   "devDependencies": {},
   "resolutions": {

diff --git a/lib/app/js/app.js b/lib/app/js/app.js
@@ -109,11 +109,26 @@ angular.module('sgApp', [
       modules: window.filesConfig
     });
   })
-  .run(function($rootScope) {
+  .factory('lodash', ['$window',
+    function($window) {
+      return $window._ || _;
+    }
+  ])
+  .run(function($rootScope, $window, lodash) {
     $rootScope.currentReference = {
       section: {
       }
     };
+
+    // Create global throttled scorll
+    function broadcastScrollEvent(event) {
+      console.log("SCROLL!");
+      $rootScope.$broadcast('scroll', event);
+    }
+    // Some tests replace $window with a mock, make sure that we have real window
+    if (typeof $window.addEventListener === 'function') {
+      angular.element($window).bind('scroll', lodash.throttle(broadcastScrollEvent, 350));
+    }
   })
   .filter('addWrapper', ['Styleguide', function(Styleguide) {
     return function(html) {

diff --git a/lib/app/js/directives/section.js b/lib/app/js/directives/section.js
@@ -30,7 +30,7 @@ angular.module('sgApp')
         scope.section.showCSS = false;
 
         // Listen to scroll events and update currentReference if this section is currently focused
-        angular.element($window).bind('scroll', function() {
+        scope.$on('scroll', function() {
           updateCurrentReference();
         });
 

diff --git a/test/karma.conf.js b/test/karma.conf.js
@@ -23,6 +23,7 @@ module.exports = function(config) {
       'lib/app/js/components/ngprogress/build/ngProgress.js',
       'lib/app/js/components/angular-debounce/dist/angular-debounce.js',
       'lib/app/js/components/angular-scroll/angular-scroll.js',
+      'lib/app/js/components/lodash/lodash.js',
       // application code
       'lib/app/js/*.js',
       'lib/app/js/controllers/*.js',