Recalculate offset on orientationchange event and improve scroll thro…

…ttle
abemedia · Jul 9, 2017 · bb7c1bd · bb7c1bd
1 parent f980c86
commit bb7c1bd
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 36 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "jquery-smoove",
   "description": "A simple jQuery plugin for sexy scrolling effects using CSS3 transitions and transforms.",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "main": "dist/jquery.smoove.js",
   "homepage": "http://smoove.js.org/",
   "authors": [

diff --git a/dist/jquery.smoove.js b/dist/jquery.smoove.js
@@ -1,5 +1,5 @@
 /*!
-* jQuery Smoove v0.2.10 (http://smoove.js.org/)
+* jQuery Smoove v0.2.11 (http://smoove.js.org/)
 * Copyright (c) 2017 Adam Bouqdib
 * Licensed under GPL-2.0 (http://abemedia.co.uk/license) 
 */
@@ -84,6 +84,27 @@
     }
   }
 
+  function throttle(fn, threshhold, scope) {
+    threshhold = threshhold || 250;
+    var last, deferTimer;
+    return function() {
+      var context = scope || this,
+        now = +new Date(),
+        args = arguments;
+      if (last && now < last + threshhold) {
+        // hold on to it
+        clearTimeout(deferTimer);
+        deferTimer = setTimeout(function() {
+          last = now;
+          fn.apply(context, args);
+        }, threshhold);
+      } else {
+        last = now;
+        fn.apply(context, args);
+      }
+    };
+  }
+
   $.fn.smoove = function(options) {
     $.fn.smoove.init(this, $.extend({}, $.fn.smoove.defaults, options));
     return this;
@@ -121,8 +142,7 @@
     if (!$.fn.smoove.loaded) {
       $.fn.smoove.loaded = true;
 
-      var didScroll = false,
-        oldScroll = 0,
+      var oldScroll = 0,
         oldHeight = $(window).height(),
         oldWidth = $(window).width(),
         oldDocHeight = $(document).height(),
@@ -133,7 +153,7 @@
         $('body').css('overflow-x', 'hidden');
       }
 
-      $(window).resize(function() {
+      $(window).on("orientationchange resize", function() {
         clearTimeout(resizing);
         resizing = setTimeout(function() {
           var height = $(window).height(),
@@ -173,18 +193,12 @@
         smooveIt();
 
         // throttle scroll handler
-        $(window).scroll(function() {
-          didScroll = true;
-        });
-        setInterval(function() {
-          if (didScroll) {
-            didScroll = false;
-            var scrolltop = $(window).scrollTop(),
-              direction = (scrolltop < oldScroll) ? direction = 'up' : 'down';
-            oldScroll = scrolltop;
-            smooveIt(direction);
-          }
-        }, 250);
+        $(window).on('scroll', throttle(function() {
+          var scrolltop = $(window).scrollTop(),
+            direction = (scrolltop < oldScroll) ? direction = 'up' : 'down';
+          oldScroll = scrolltop;
+          smooveIt(direction);
+        }, 250));
       });
     }
   };

diff --git a/dist/jquery.smoove.min.js b/dist/jquery.smoove.min.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "jquery-smoove",
   "title": "jQuery Smoove - Gorgeous CSS3 Scroll Effects",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "A simple jQuery plugin for sexy scrolling effects using CSS3 transitions and transforms.",
   "homepage": "http://smoove.js.org/",
   "author": "Adam Bouqdib (http://abemedia.co.uk/)",

diff --git a/smoove.jquery.json b/smoove.jquery.json
@@ -1,7 +1,7 @@
 {
   "name": "smoove",
   "title": "jQuery Smoove - Gorgeous CSS3 Scroll Effects",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "A simple jQuery plugin for sexy scrolling effects using CSS3 transitions and transforms.",
   "homepage": "http://smoove.js.org/",
   "author": {

diff --git a/src/jquery.smoove.js b/src/jquery.smoove.js
@@ -79,6 +79,27 @@
     }
   }
 
+  function throttle(fn, threshhold, scope) {
+    threshhold = threshhold || 250;
+    var last, deferTimer;
+    return function() {
+      var context = scope || this,
+        now = +new Date(),
+        args = arguments;
+      if (last && now < last + threshhold) {
+        // hold on to it
+        clearTimeout(deferTimer);
+        deferTimer = setTimeout(function() {
+          last = now;
+          fn.apply(context, args);
+        }, threshhold);
+      } else {
+        last = now;
+        fn.apply(context, args);
+      }
+    };
+  }
+
   $.fn.smoove = function(options) {
     $.fn.smoove.init(this, $.extend({}, $.fn.smoove.defaults, options));
     return this;
@@ -116,8 +137,7 @@
     if (!$.fn.smoove.loaded) {
       $.fn.smoove.loaded = true;
 
-      var didScroll = false,
-        oldScroll = 0,
+      var oldScroll = 0,
         oldHeight = $(window).height(),
         oldWidth = $(window).width(),
         oldDocHeight = $(document).height(),
@@ -128,7 +148,7 @@
         $('body').css('overflow-x', 'hidden');
       }
 
-      $(window).resize(function() {
+      $(window).on("orientationchange resize", function() {
         clearTimeout(resizing);
         resizing = setTimeout(function() {
           var height = $(window).height(),
@@ -168,18 +188,12 @@
         smooveIt();
 
         // throttle scroll handler
-        $(window).scroll(function() {
-          didScroll = true;
-        });
-        setInterval(function() {
-          if (didScroll) {
-            didScroll = false;
-            var scrolltop = $(window).scrollTop(),
-              direction = (scrolltop < oldScroll) ? direction = 'up' : 'down';
-            oldScroll = scrolltop;
-            smooveIt(direction);
-          }
-        }, 250);
+        $(window).on('scroll', throttle(function() {
+          var scrolltop = $(window).scrollTop(),
+            direction = (scrolltop < oldScroll) ? direction = 'up' : 'down';
+          oldScroll = scrolltop;
+          smooveIt(direction);
+        }, 250));
       });
     }
   };