Use window.requestAnimationFrame

WSJ · Apr 20, 2018 · a514731 · a514731
1 parent 620a689
commit a514731
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/scroll-watcher.js b/scroll-watcher.js
@@ -4,7 +4,7 @@ Developed by Elliot Bentley for The Wall Street Journal
 Released under the ISC license
 */
 function scrollWatcher(opts){
-    var interval;
+    var isRunning = false;
     var $outer = $(opts.parent);
     var $inner = $(opts.parent).children().eq(0);
     var that = {
@@ -38,7 +38,7 @@ function scrollWatcher(opts){
         if (!scrollPosMaxOrMore) {
             // 'active' property is for external API
             that.active = true;
-            that.hasBeenActive = true;            
+            that.hasBeenActive = true;
             maxedOut = false;
         }
         if (!maxedOut) {
@@ -105,25 +105,32 @@ function scrollWatcher(opts){
         }
         previousInnerHeight = newInnerHeight;
     }
-        
+
     // stop checking and unstick
     that.stop = function(){
-        clearInterval( interval );
+        that.pause();
         $outer.attr('id','');
         $inner.fixTo('destroy');
         return this;
     };
     // stop checking but keep stuck
     that.pause = function(){
-        clearInterval( interval );
+        isRunning = false;
         return this;
     };
     // starts watching for scroll movement
     that.start = function(){
         // sticky stuff
         $outer.attr('id',outerId);
         $inner.fixTo('#'+outerId);
-        interval = setInterval(onTick,20);
+        var fn = function() {
+          if (isRunning === true) {
+            onTick();
+            window.requestAnimationFrame(fn);
+          }
+        }
+        isRunning = true;
+        window.requestAnimationFrame(fn);
         return this;
     }
     // could be a useful alias