Desplácese a una ubicación determinada utilizando un Dojo ContentPanel

Question

La aplicación My Dojo utiliza algunos paneles de contenido para mostrar diferentes bits de información. El panel principal tiene una buena cantidad de datos desplazables. Necesito poder presionar un botón para saltar a ciertos lugares.

Actualmente usando:

dojo.byId(iid).scrollIntoView(); 

Esto funciona perfectamente, excepto que parece basar el cálculo en la parte superior ventana del navegador en lugar de arriba los contentpanes'. Como mi panel de contenido NO está en la parte superior de la página (hay una barra de herramientas de 50 píxeles de alto en la parte superior), el DIV que estoy desplazando también es 50 píxeles demasiado alto.

Algo como esto funcionaría, pero scrollBy sólo se aplica a la ventana:

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. 

Antecedentes de aplicación completa: La aplicación utiliza unos de dijit.layout.BorderContainer para la disposición. Un usuario puede hacer clic en el árbol de la izquierda para mostrar un evento en el panel de la derecha. Si hacen clic en un "Objetivo", creo todos los nodos DOM en el panel derecho dinámicamente y luego intento desplazarme hacia el elemento en el que se hace clic. La parte de desplazamiento funciona para los nodos superior e inferior, pero se compensa para los nodos intermedios.

Answer 1

Una opción podría ser la de tomar ventaja de dojox.fx.smoothScroll.

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

La documentación del API en smoothScroll es cierto mínimo, pero eso explica algunos de los parámetros que puede pasar en el objeto a la misma. http://dojotoolkit.org/api/dojox/fx/smoothScroll - por cierto, el sitio API utiliza una variante de dojox.fx.smoothScroll para hacer lo mismo.

Answer 2

No estoy seguro si esto es legítimo, pero acabo de tomar el código dojox.fx.scroll y agregué la funcionalidad 'offset' mencionada anteriormente (la necesitaba también).

Empecé por arrebatar el código dojox.fx.scroll con el depurador de Chrome y pegarlo en un nuevo archivo .js en mi carpeta de scripts.

Cambié el nombre en la cadena 'definir' de dojox/fx/scroll a dojox/fx/scrollMod. También cambié las referencias de .smoothScroll a .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; 
}); 

I añade el siguiente al método _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; 
} 

A continuación se hace referencia a este archivo en el archivo HTML como una escritura normal:

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

Y finalmente llamarlo como tal (como lo haría normalmente, pero con el objeto compensado):

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();