add one config named "container"(scroll element)

default scroll element is body element, add the "container" config to set scroll element.

src/echo.js

@@ -1,134 +1,145 @@
-(function (root, factory) {
+(function (window, factory) {
-  if (typeof define === 'function' && define.amd) {
+  if (typeof define === 'function' && define.amd) {
-    define(function() {
+    define(function() {
-      return factory(root);
+      return factory();
-    });
+    });
-  } else if (typeof exports === 'object') {
+  } else if (typeof exports === 'object') {
-    module.exports = factory;
+    module.exports = factory;
-  } else {
+  } else {
-    root.echo = factory(root);
+    window.echo = factory();
-  }
+  }
-})(this, function (root) {
+})(window, function () {
-
+
-  'use strict';
+  'use strict';
-
+
-  var echo = {};
+  var echo = {};
-
+
-  var callback = function () {};
+  var callback = function () {};
-
+
-  var offset, poll, delay, useDebounce, unload;
+  var offset, poll, delay, useDebounce, unload, container, scrollListenElement;
-
+
-  var isHidden = function (element) {
+  var isHidden = function (element) {
-    return (element.offsetParent === null);
+    return (element.offsetParent === null);
-  };
+  };
-  
+  
-  var inView = function (element, view) {
+  var inView = function (element, view) {
-    if (isHidden(element)) {
+    if (isHidden(element)) {
-      return false;
+      return false;
-    }
+    }
-
+
-    var box = element.getBoundingClientRect();
+    var box = element.getBoundingClientRect();
-    return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
+    return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
-  };
+  };
-
+
-  var debounceOrThrottle = function () {
+  var debounceOrThrottle = function () {
-    if(!useDebounce && !!poll) {
+    if(!useDebounce && !!poll) {
-      return;
+      return;
-    }
+    }
-    clearTimeout(poll);
+    clearTimeout(poll);
-    poll = setTimeout(function(){
+    poll = setTimeout(function(){
-      echo.render();
+      echo.render();
-      poll = null;
+      poll = null;
-    }, delay);
+    }, delay);
-  };
+  };
-
+
-  echo.init = function (opts) {
+  echo.init = function (opts) {
-    opts = opts || {};
+    opts = opts || {};
-    var offsetAll = opts.offset || 0;
+    var offsetAll = opts.offset || 0;
-    var offsetVertical = opts.offsetVertical || offsetAll;
+    var offsetVertical = opts.offsetVertical || offsetAll;
-    var offsetHorizontal = opts.offsetHorizontal || offsetAll;
+    var offsetHorizontal = opts.offsetHorizontal || offsetAll;
-    var optionToInt = function (opt, fallback) {
+    var optionToInt = function (opt, fallback) {
-      return parseInt(opt || fallback, 10);
+      return parseInt(opt || fallback, 10);
-    };
+    };
-    offset = {
+    var bodyElement=document.body;
-      t: optionToInt(opts.offsetTop, offsetVertical),
+    container = opts.container || bodyElement;
-      b: optionToInt(opts.offsetBottom, offsetVertical),
+    scrollListenElement = (container!==bodyElement) ? container : window;
-      l: optionToInt(opts.offsetLeft, offsetHorizontal),
+    offset = {
-      r: optionToInt(opts.offsetRight, offsetHorizontal)
+      t: optionToInt(opts.offsetTop, offsetVertical),
-    };
+      b: optionToInt(opts.offsetBottom, offsetVertical),
-    delay = optionToInt(opts.throttle, 250);
+      l: optionToInt(opts.offsetLeft, offsetHorizontal),
-    useDebounce = opts.debounce !== false;
+      r: optionToInt(opts.offsetRight, offsetHorizontal)
-    unload = !!opts.unload;
+    };
-    callback = opts.callback || callback;
+    delay = optionToInt(opts.throttle, 250);
-    echo.render();
+    useDebounce = opts.debounce !== false;
-    if (document.addEventListener) {
+    unload = !!opts.unload;
-      root.addEventListener('scroll', debounceOrThrottle, false);
+    callback = opts.callback || callback;
-      root.addEventListener('load', debounceOrThrottle, false);
+    echo.render();
-    } else {
+    if (document.addEventListener) {
-      root.attachEvent('onscroll', debounceOrThrottle);
+      /*root.addEventListener('scroll', debounceOrThrottle, false);
-      root.attachEvent('onload', debounceOrThrottle);
+      root.addEventListener('load', debounceOrThrottle, false);*/
-    }
+      scrollListenElement.addEventListener('scroll', debounceOrThrottle, false);
-  };
+      window.addEventListener('load', debounceOrThrottle, false);
-
+    } else {
-  echo.render = function () {
+      /*root.attachEvent('onscroll', debounceOrThrottle);
-    var nodes = document.querySelectorAll('img[data-echo], [data-echo-background]');
+      root.attachEvent('onload', debounceOrThrottle);*/
-    var length = nodes.length;
+      scrollListenElement.attachEvent('onscroll', debounceOrThrottle);
-    var src, elem;
+      window.attachEvent('onload', debounceOrThrottle);
-    var view = {
+    }
-      l: 0 - offset.l,
+  };
-      t: 0 - offset.t,
+
-      b: (root.innerHeight || document.documentElement.clientHeight) + offset.b,
+  echo.render = function () {
-      r: (root.innerWidth || document.documentElement.clientWidth) + offset.r
+    var nodes = document.querySelectorAll('img[data-echo], [data-echo-background]');
-    };
+    var length = nodes.length;
-    for (var i = 0; i < length; i++) {
+    var src, elem;
-      elem = nodes[i];
+    var view = {
-      if (inView(elem, view)) {
+      l: 0 - offset.l,
-
+      t: 0 - offset.t,
-        if (unload) {
+      /*b: (root.innerHeight || document.documentElement.clientHeight) + offset.b,
-          elem.setAttribute('data-echo-placeholder', elem.src);
+      r: (root.innerWidth || document.documentElement.clientWidth) + offset.r*/
-        }
+      b: container.clientHeight + offset.b,
-
+      r: container.clientWidth + offset.r
-        if (elem.getAttribute('data-echo-background') !== null) {
+    };
-          elem.style.backgroundImage = "url(" + elem.getAttribute('data-echo-background') + ")";
+    for (var i = 0; i < length; i++) {
-        }
+      elem = nodes[i];
-        else {
+      if (inView(elem, view)) {
-          elem.src = elem.getAttribute('data-echo');
+        
-        }
+        if (unload) {
-
+          elem.setAttribute('data-echo-placeholder', elem.src);
-        if (!unload) {
+        }
-          elem.removeAttribute('data-echo');
+
-          elem.removeAttribute('data-echo-background');
+        if (elem.getAttribute('data-echo-background') !== null) {
-        }
+          elem.style.backgroundImage = "url(" + elem.getAttribute('data-echo-background') + ")";
-
+        }
-        callback(elem, 'load');
+        else {
-      }
+          elem.src = elem.getAttribute('data-echo');
-      else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) {
+        }
-
+
-        if (elem.getAttribute('data-echo-background') !== null) {
+        if (!unload) {
-          elem.style.backgroundImage = "url(" + src + ")";
+          elem.removeAttribute('data-echo');
-        }
+          elem.removeAttribute('data-echo-background');
-        else {
+        }
-          elem.src = src;
+
-        }
+        callback(elem, 'load');
-
+      }
-        elem.removeAttribute('data-echo-placeholder');
+      else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) {
-        callback(elem, 'unload');
+
-      }
+        if (elem.getAttribute('data-echo-background') !== null) {
-    }
+          elem.style.backgroundImage = "url(" + src + ")";
-    if (!length) {
+        }
-      echo.detach();
+        else {
-    }
+          elem.src = src;
-  };
+        }
-
+
-  echo.detach = function () {
+        elem.removeAttribute('data-echo-placeholder');
-    if (document.removeEventListener) {
+        callback(elem, 'unload');
-      root.removeEventListener('scroll', debounceOrThrottle);
+      }
-    } else {
+    }
-      root.detachEvent('onscroll', debounceOrThrottle);
+    if (!length) {
-    }
+      echo.detach();
-    clearTimeout(poll);
+    }
-  };
+  };
-
+
-  return echo;
+  echo.detach = function () {
-
+    if (document.removeEventListener) {
-});
+      /*root.removeEventListener('scroll', debounceOrThrottle);*/
+      window.removeEventListener('scroll', debounceOrThrottle);
+    } else {
+      /*root.detachEvent('onscroll', debounceOrThrottle);*/
+      window.detachEvent('onscroll', debounceOrThrottle);
+    }
+    clearTimeout(poll);
+  };
+
+  return echo;
+
+});