src/core/src/dom/Element.scroll.js

   1 /**
   2  * @class Ext.core.Element
   3  */
   4 Ext.override(Ext.core.Element, {
   5     /**
   6      * Returns true if this element is scrollable.
   7      * @return {Boolean}
   8      */
   9     isScrollable : function(){
  10         var dom = this.dom;
  11         return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
  12     },
  13
  14     /**
  15      * Returns the current scroll position of the element.
  16      * @return {Object} An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}
  17      */
  18     getScroll : function() {
  19         var d = this.dom,
  20             doc = document,
  21             body = doc.body,
  22             docElement = doc.documentElement,
  23             l,
  24             t,
  25             ret;
  26
  27         if (d == doc || d == body) {
  28             if (Ext.isIE && Ext.isStrict) {
  29                 l = docElement.scrollLeft;
  30                 t = docElement.scrollTop;
  31             } else {
  32                 l = window.pageXOffset;
  33                 t = window.pageYOffset;
  34             }
  35             ret = {
  36                 left: l || (body ? body.scrollLeft : 0),
  37                 top : t || (body ? body.scrollTop : 0)
  38             };
  39         } else {
  40             ret = {
  41                 left: d.scrollLeft,
  42                 top : d.scrollTop
  43             };
  44         }
  45
  46         return ret;
  47     },
  48
  49     /**
  50      * Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().
  51      * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
  52      * @param {Number} value The new scroll value
  53      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  54      * @return {Element} this
  55      */
  56     scrollTo : function(side, value, animate) {
  57         //check if we're scrolling top or left
  58         var top = /top/i.test(side),
  59             me = this,
  60             dom = me.dom,
  61             obj = {},
  62             prop;
  63         if (!animate || !me.anim) {
  64             // just setting the value, so grab the direction
  65             prop = 'scroll' + (top ? 'Top' : 'Left');
  66             dom[prop] = value;
  67         }
  68         else {
  69             if (!Ext.isObject(animate)) {
  70                 animate = {};
  71             }
  72             obj['scroll' + (top ? 'Top' : 'Left')] = value;
  73             me.animate(Ext.applyIf({
  74                 to: obj
  75             }, animate));
  76         }
  77         return me;
  78     },
  79
  80     /**
  81      * Scrolls this element into view within the passed container.
  82      * @param {Mixed} container (optional) The container element to scroll (defaults to document.body).  Should be a
  83      * string (id), dom node, or Ext.core.Element.
  84      * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)
  85      * @return {Ext.core.Element} this
  86      */
  87     scrollIntoView : function(container, hscroll) {
  88         container = Ext.getDom(container) || Ext.getBody().dom;
  89         var el = this.dom,
  90             offsets = this.getOffsetsTo(container),
  91             // el's box
  92             left = offsets[0] + container.scrollLeft,
  93             top = offsets[1] + container.scrollTop,
  94             bottom = top + el.offsetHeight,
  95             right = left + el.offsetWidth,
  96             // ct's box
  97             ctClientHeight = container.clientHeight,
  98             ctScrollTop = parseInt(container.scrollTop, 10),
  99             ctScrollLeft = parseInt(container.scrollLeft, 10),
 100             ctBottom = ctScrollTop + ctClientHeight,
 101             ctRight = ctScrollLeft + container.clientWidth;
 102
 103         if (el.offsetHeight > ctClientHeight || top < ctScrollTop) {
 104             container.scrollTop = top;
 105         } else if (bottom > ctBottom) {
 106             container.scrollTop = bottom - ctClientHeight;
 107         }
 108         // corrects IE, other browsers will ignore
 109         container.scrollTop = container.scrollTop;
 110
 111         if (hscroll !== false) {
 112             if (el.offsetWidth > container.clientWidth || left < ctScrollLeft) {
 113                 container.scrollLeft = left;
 114             }
 115             else if (right > ctRight) {
 116                 container.scrollLeft = right - container.clientWidth;
 117             }
 118             container.scrollLeft = container.scrollLeft;
 119         }
 120         return this;
 121     },
 122
 123     // private
 124     scrollChildIntoView : function(child, hscroll) {
 125         Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
 126     },
 127
 128     /**
 129      * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
 130      * within this element's scrollable range.
 131      * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
 132      * @param {Number} distance How far to scroll the element in pixels
 133      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
 134      * @return {Boolean} Returns true if a scroll was triggered or false if the element
 135      * was scrolled as far as it could go.
 136      */
 137      scroll : function(direction, distance, animate) {
 138         if (!this.isScrollable()) {
 139             return false;
 140         }
 141         var el = this.dom,
 142             l = el.scrollLeft, t = el.scrollTop,
 143             w = el.scrollWidth, h = el.scrollHeight,
 144             cw = el.clientWidth, ch = el.clientHeight,
 145             scrolled = false, v,
 146             hash = {
 147                 l: Math.min(l + distance, w-cw),
 148                 r: v = Math.max(l - distance, 0),
 149                 t: Math.max(t - distance, 0),
 150                 b: Math.min(t + distance, h-ch)
 151             };
 152             hash.d = hash.b;
 153             hash.u = hash.t;
 154
 155         direction = direction.substr(0, 1);
 156         if ((v = hash[direction]) > -1) {
 157             scrolled = true;
 158             this.scrollTo(direction == 'l' || direction == 'r' ? 'left' : 'top', v, this.anim(animate));
 159         }
 160         return scrolled;
 161     }
 162 });