Scroll to a specific location using the Dojo ContentPanel

Question

My Dojo application uses several content panels to display various bits of information. The main panel has a large amount of scrolling data. I need to press a button to go to certain places.

Currently used:

dojo.byId(iid).scrollIntoView();

This works fine, except that it seems to base the calculations on the top of the browser window and not on the tops of the contentpanes. Since my contentpane is NOT at the top of the page (there is a panel with a high resolution of 50 pixels at the top), the DIV that I scroll is too high by 50 pixels.

Something like this will work, but scrollBy only applies to the window:

dojo.byId(iid).scrollIntoView();   //Scroll to div in quesiton
dojo.byId(iid).scrollBy(0,50);   //scroll down 50px more to account for panes offset from window.

Background of the full application: The application uses several dijit.layout.BorderContainer for the layout. The user can click on the left tree to trigger an event in the right pane. If they click on "Target", I create all the DOM nodes in the right pane dynamically, then try to scroll to click on the element. The scrollable part works for the upper and lower nodes, but is offset for the middle nodes.

Answer 1

One option may be to use dojox.fx.smoothScroll.

Example: http://jsfiddle.net/kfranqueiro/6aNrp/

- API smoothScroll, , , , . http://dojotoolkit.org/api/dojox/fx/smoothScroll - , API dojox.fx.smoothScroll, .

Answer 2

, , dojox.fx.scroll "offset" ( ).

dojox.fx.scroll Chrome .js .

'define' dojox/fx/scroll dojox/fx/scrollMod. .smoothScroll .smoothScrollMod.

define("dojox/fx/scrollMod", ["dojo/_base/kernel", "dojo/_base/lang", "dojo/_base/fx",
"dojox/fx/_base", "dojox/fx/_core", "dojo/dom-geometry", "dojo/_base/sniff"],
function (_1, _2, _3, _4, _5, _6, _7) {
_1.experimental("dojox.fx.scroll");
var fx = _2.getObject("dojox.fx", true);
_4.smoothScrollMod = function (_8) {
    if (!_8.target) {
        _8.target = _6.position(_8.node);
    }

    var dx = 0; //RW Custom Offsets
    var dy = 0; //RW Custom Offsets
    if (_8.offset) {
        dx = _8.offset.x;
        dy = _8.offset.y;
    }

    var _9 = _2[(_7("ie") ? "isObject" : "isFunction")](_8["win"].scrollTo),
    _a = { x: _8.target.x + dx, y: _8.target.y + dy };

    if (!_9) {
        var _b = _6.position(_8.win); _a.x -= _b.x; _a.y -= _b.y;
    }
    var _c = (_9) ? (function (_d) { _8.win.scrollTo(_d[0], _d[1]); }) : (function (_e) { _8.win.scrollLeft = _e[0]; _8.win.scrollTop = _e[1]; });
    var _f = new _3.Animation(_2.mixin({ beforeBegin: function () {
        if (this.curve) { delete this.curve; }

        var _10 = _9 ? dojo._docScroll() : { x: _8.win.scrollLeft, y: _8.win.scrollTop };
        _f.curve = new _5([_10.x, _10.y], [_10.x + _a.x, _10.y + _a.y]);
    }, onAnimate: _c
    }, _8));
    return _f;
};
fx.smoothScrollMod = _4.smoothScrollMod; return _4.smoothScrollMod;
});

_4.smoothScrollMod:

var dx = 0; //RW Custom Offsets
var dy = 0; //RW Custom Offsets
if (_8.offset) {
    dx = _8.offset.x;
    dy = _8.offset.y;
}

HTML , script:

<script src="scripts/dojoScrollMod.js" type="text/javascript"></script>

, , ( , ):

  var sm = new dojox.fx.smoothScrollMod({
      node: dojo.query("mySelector")[0],
      win: window,
      easing: dojo.fx.easing.quadInOut,
      offset: { "x": 0, "y": -200},
      duration: 800
  }).play();