From 473da8dcee0ae10eccfe74edf598377cebe1738d Mon Sep 17 00:00:00 2001 From: Robert Plummer Date: Wed, 23 Oct 2013 21:25:43 -0400 Subject: [PATCH 1/2] jQuery scrollLeft and scrollTop are very slow in IE, needed this for a project, and thought I'd contribute --- waypoints.js | 92 ++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 86 insertions(+), 6 deletions(-) diff --git a/waypoints.js b/waypoints.js index 81da4144..b44b3a23 100644 --- a/waypoints.js +++ b/waypoints.js @@ -39,7 +39,69 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt wps = 'waypoints'; Context = (function() { function Context($element) { - var _this = this; + var _this = this, + element = $element[0], + supplier, + x, + y; + + element.scrollSuppliers = [ + { + obj: element, + x: 'scrollLeft', + y: 'scrollTop' + }, + { + obj: element, + x: 'scrollX', + y: 'scrollY' + }, + { + obj: document.body, + x: 'scrollLeft', + y: 'scrollTop' + }, + { + obj: document.documentElement, + x: 'scrollLeft', + y: 'scrollTop' + }, + { + obj: window, + x: 'pageXOffset', + y: 'pageYOffset' + }, + { + obj: document.body.parentElement || {}, + x: 'scrollLeft', + y: 'scrollTop' + } + ]; + element.scrollSupplier = null; + element.scrollSupplierGet = function () { + var i = 0, + s; + + while (i < this.scrollSuppliers.length) { + s = this.scrollSuppliers[i]; + if ( + s.obj[s.x] + || s.obj[s.y] + ) { + return (this.scrollSupplier = s); + } + i++; + } + return null; + }; + + if (supplier = element.scrollSupplierGet()) { + x = supplier.obj[supplier.x]; + y = supplier.obj[supplier.y]; + } else { + x = $element.scrollLeft(); + Y = $element.scrollTop(); + } this.$element = $element; this.element = $element[0]; @@ -47,8 +109,8 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt this.didScroll = false; this.id = 'context' + contextCounter++; this.oldScroll = { - x: $element.scrollLeft(), - y: $element.scrollTop() + x: x, + y: y }; this.waypoints = { horizontal: {}, @@ -84,17 +146,35 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt Context.prototype.doScroll = function() { var axes, - _this = this; + _this = this, + element = this.element, + $element = this.$element, + x, + y, + supplier; + + if (!(supplier = element.scrollSupplier)) { + if (supplier = element.scrollSupplierGet()) { + x = supplier.obj[supplier.x]; + y = supplier.obj[supplier.y]; + } else { + x = $element.scrollLeft(); + y = $element.scrollTop(); + } + } else { + x = supplier.obj[supplier.x]; + y = supplier.obj[supplier.y]; + } axes = { horizontal: { - newScroll: this.$element.scrollLeft(), + newScroll: x, oldScroll: this.oldScroll.x, forward: 'right', backward: 'left' }, vertical: { - newScroll: this.$element.scrollTop(), + newScroll: y, oldScroll: this.oldScroll.y, forward: 'down', backward: 'up' From ef5c317602c4f69c37147e1b4eadac915cd03e73 Mon Sep 17 00:00:00 2001 From: Robert Plummer Date: Thu, 24 Oct 2013 13:32:22 -0400 Subject: [PATCH 2/2] jQuery scrollLeft and scrollTop are very slow in IE, needed this for a project, and thought I'd contribute, this time in coffeescript --- waypoints.coffee | 65 +++++++++++++++++++++++++++-- waypoints.js | 106 ++++++++++++++--------------------------------- 2 files changed, 92 insertions(+), 79 deletions(-) diff --git a/waypoints.coffee b/waypoints.coffee index 67feb38c..0b3b71fc 100644 --- a/waypoints.coffee +++ b/waypoints.coffee @@ -92,14 +92,61 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt class Context constructor: ($element) -> + element = $element[0] + element.scrollSuppliers = [ + { + obj: element, + x: 'scrollLeft', + y: 'scrollTop' + }, + { + obj: element, + x: 'scrollX', + y: 'scrollY' + }, + { + obj: document.body, + x: 'scrollLeft', + y: 'scrollTop' + }, + { + obj: document.documentElement, + x: 'scrollLeft', + y: 'scrollTop' + }, + { + obj: window, + x: 'pageXOffset', + y: 'pageYOffset' + }, + { + obj: document.body.parentElement || {}, + x: 'scrollLeft', + y: 'scrollTop' + } + ] + element.scrollSupplier = null + element.scrollSupplierGet = () -> + for s, i in element.scrollSuppliers + if s.obj[s.x] || s.obj[s.y] + return (element.scrollSupplier = s) + return null + + if supplier = element.scrollSupplierGet() + x = supplier.obj[supplier.x] + y = supplier.obj[supplier.y] + else + x = $element.scrollLeft() + y = $element.scrollTop() + @$element = $element @element = $element[0] @didResize = no @didScroll = no @id = 'context' + contextCounter++ @oldScroll = - x: $element.scrollLeft() - y: $element.scrollTop() + x: x + y: y @waypoints = horizontal: {} vertical: {} @@ -135,18 +182,28 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt # scroll values, and checks to see if any waypoints should be triggered # by that change. doScroll: -> + if !(supplier = @element.scrollSupplier) + if supplier = @element.scrollSupplierGet() + x = supplier.obj[supplier.x] + y = supplier.obj[supplier.y] + else + x = @$element.scrollLeft() + y = @$element.scrollTop() + else + x = supplier.obj[supplier.x] + y = supplier.obj[supplier.y] # We use some hashes with common values for each axis so that we can # just iterate over it rather than write the whole thing twice for # each axis. axes = horizontal: - newScroll: @$element.scrollLeft() + newScroll: x oldScroll: @oldScroll.x forward: 'right' backward: 'left' vertical: - newScroll: @$element.scrollTop() + newScroll: y oldScroll: @oldScroll.y forward: 'down' backward: 'up' diff --git a/waypoints.js b/waypoints.js index b44b3a23..ada49b2f 100644 --- a/waypoints.js +++ b/waypoints.js @@ -1,4 +1,4 @@ -// Generated by CoffeeScript 1.6.2 +// Generated by CoffeeScript 1.6.3 /* jQuery Waypoints - v2.0.3 Copyright (c) 2011-2013 Caleb Troughton @@ -21,7 +21,6 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt } })(this, function($, window) { var $w, Context, Waypoint, allWaypoints, contextCounter, contextKey, contexts, isTouch, jQMethods, methods, resizeEvent, scrollEvent, waypointCounter, waypointKey, wp, wps; - $w = $(window); isTouch = __indexOf.call(window, 'ontouchstart') >= 0; allWaypoints = { @@ -39,70 +38,55 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt wps = 'waypoints'; Context = (function() { function Context($element) { - var _this = this, - element = $element[0], - supplier, - x, - y; - + var element, supplier, x, y, + _this = this; + element = $element[0]; element.scrollSuppliers = [ { obj: element, x: 'scrollLeft', y: 'scrollTop' - }, - { + }, { obj: element, x: 'scrollX', y: 'scrollY' - }, - { + }, { obj: document.body, x: 'scrollLeft', y: 'scrollTop' - }, - { + }, { obj: document.documentElement, x: 'scrollLeft', y: 'scrollTop' - }, - { + }, { obj: window, x: 'pageXOffset', y: 'pageYOffset' - }, - { + }, { obj: document.body.parentElement || {}, x: 'scrollLeft', y: 'scrollTop' } ]; element.scrollSupplier = null; - element.scrollSupplierGet = function () { - var i = 0, - s; - - while (i < this.scrollSuppliers.length) { - s = this.scrollSuppliers[i]; - if ( - s.obj[s.x] - || s.obj[s.y] - ) { - return (this.scrollSupplier = s); + element.scrollSupplierGet = function() { + var i, s, _i, _len, _ref; + _ref = element.scrollSuppliers; + for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) { + s = _ref[i]; + if (s.obj[s.x] || s.obj[s.y]) { + return (element.scrollSupplier = s); } - i++; } return null; }; - if (supplier = element.scrollSupplierGet()) { x = supplier.obj[supplier.x]; y = supplier.obj[supplier.y]; } else { x = $element.scrollLeft(); - Y = $element.scrollTop(); + y = $element.scrollTop(); } - this.$element = $element; this.element = $element[0]; this.didResize = false; @@ -120,7 +104,6 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt contexts[this.id] = this; $element.bind(scrollEvent, function() { var scrollHandler; - if (!(_this.didScroll || isTouch)) { _this.didScroll = true; scrollHandler = function() { @@ -132,7 +115,6 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt }); $element.bind(resizeEvent, function() { var resizeHandler; - if (!_this.didResize) { _this.didResize = true; resizeHandler = function() { @@ -145,27 +127,20 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt } Context.prototype.doScroll = function() { - var axes, - _this = this, - element = this.element, - $element = this.$element, - x, - y, - supplier; - - if (!(supplier = element.scrollSupplier)) { - if (supplier = element.scrollSupplierGet()) { - x = supplier.obj[supplier.x]; - y = supplier.obj[supplier.y]; - } else { - x = $element.scrollLeft(); - y = $element.scrollTop(); - } - } else { + var axes, supplier, x, y, + _this = this; + if (!(supplier = this.element.scrollSupplier)) { + if (supplier = this.element.scrollSupplierGet()) { x = supplier.obj[supplier.x]; y = supplier.obj[supplier.y]; + } else { + x = this.$element.scrollLeft(); + y = this.$element.scrollTop(); } - + } else { + x = supplier.obj[supplier.x]; + y = supplier.obj[supplier.y]; + } axes = { horizontal: { newScroll: x, @@ -185,13 +160,11 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt } $.each(axes, function(aKey, axis) { var direction, isForward, triggered; - triggered = []; isForward = axis.newScroll > axis.oldScroll; direction = isForward ? axis.forward : axis.backward; $.each(_this.waypoints[aKey], function(wKey, waypoint) { var _ref, _ref1; - if ((axis.oldScroll < (_ref = waypoint.offset) && _ref <= axis.newScroll)) { return triggered.push(waypoint); } else if ((axis.newScroll < (_ref1 = waypoint.offset) && _ref1 <= axis.oldScroll)) { @@ -219,7 +192,6 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt Context.prototype.refresh = function() { var axes, cOffset, isWin, _this = this; - isWin = $.isWindow(this.element); cOffset = this.$element.offset(); this.doScroll(); @@ -246,7 +218,6 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt return $.each(axes, function(aKey, axis) { return $.each(_this.waypoints[aKey], function(i, waypoint) { var adjustment, elementOffset, oldOffset, _ref, _ref1; - adjustment = waypoint.options.offset; oldOffset = waypoint.offset; elementOffset = $.isWindow(waypoint.element) ? 0 : waypoint.$element.offset()[axis.offsetProp]; @@ -286,12 +257,10 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt Waypoint = (function() { function Waypoint($element, context, options) { var idList, _ref; - options = $.extend({}, $.fn[wp].defaults, options); if (options.offset === 'bottom-in-view') { options.offset = function() { var contextHeight; - contextHeight = $[wps]('viewportHeight'); if (!$.isWindow(context.element)) { contextHeight = context.$element.height(); @@ -344,7 +313,6 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt Waypoint.getWaypointsByElement = function(element) { var all, ids; - ids = $(element).data(waypointKey); if (!ids) { return []; @@ -360,19 +328,16 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt })(); methods = { init: function(f, options) { - var _ref; - if (options == null) { options = {}; } - if ((_ref = options.handler) == null) { + if (options.handler == null) { options.handler = f; } this.each(function() { - var $this, context, contextElement, _ref1; - + var $this, context, contextElement, _ref; $this = $(this); - contextElement = (_ref1 = options.context) != null ? _ref1 : $.fn[wp].defaults.context; + contextElement = (_ref = options.context) != null ? _ref : $.fn[wp].defaults.context; if (!$.isWindow(contextElement)) { contextElement = $this.closest(contextElement); } @@ -411,7 +376,6 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt }, _traverse: function(axis, selector, push) { var stack, waypoints; - if (axis == null) { axis = 'vertical'; } @@ -422,7 +386,6 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt stack = []; this.each(function() { var index; - index = $.inArray(this, waypoints[axis]); return push(stack, index, waypoints[axis]); }); @@ -431,7 +394,6 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt _invoke: function($elements, method) { $elements.each(function() { var waypoints; - waypoints = Waypoint.getWaypointsByElement(this); return $.each(waypoints, function(i, waypoint) { waypoint[method](); @@ -443,7 +405,6 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt }; $.fn[wp] = function() { var args, method; - method = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : []; if (methods[method]) { return methods[method].apply(this, args); @@ -473,12 +434,10 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt }, viewportHeight: function() { var _ref; - return (_ref = window.innerHeight) != null ? _ref : $w.height(); }, aggregate: function(contextSelector) { var collection, waypoints, _ref; - collection = allWaypoints; if (contextSelector) { collection = (_ref = contexts[$(contextSelector).data(contextKey)]) != null ? _ref.waypoints : void 0; @@ -550,7 +509,6 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt }, _invoke: function(method) { var waypoints; - waypoints = $.extend({}, allWaypoints.vertical, allWaypoints.horizontal); return $.each(waypoints, function(key, waypoint) { waypoint[method](); @@ -559,7 +517,6 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt }, _filter: function(selector, axis, test) { var context, waypoints; - context = contexts[$(selector).data(contextKey)]; if (!context) { return []; @@ -580,7 +537,6 @@ https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt }; $[wps] = function() { var args, method; - method = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : []; if (jQMethods[method]) { return jQMethods[method].apply(null, args);