Dojo ContentPanel을 사용하여 특정 위치로 스크롤

Question

My Dojo 애플리케이션은 몇 개의 contentpane을 사용하여 다른 정보 비트를 표시합니다. 메인 창은 좋은 양의 스크롤 가능한 데이터를 가지고 있습니다. 나는 버튼을 눌러 특정 장소로 ​​이동할 수 있어야한다. 현재 사용

:

이가 오히려 contentpanes '최고보다 브라우저 창 상단에있는 계산의 기준이 보인다 것을 제외하고 완벽하게 작동

dojo.byId(iid).scrollIntoView(); 

. 내 contentpane이 페이지의 맨 위에 있지 않기 때문에 (상단에 50px의 높은 툴바가 있음) DIV 또한 스크롤하는 것이 50px가 너무 높습니다. 이 같은

뭔가 일 것이지만, scrollBy은 창에 적용 : 전체 응용 프로그램의

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. 

배경 : 응용 프로그램은 레이아웃에 대한 몇 가지 dijit.layout.BorderContainer 년대를 사용합니다. 사용자는 왼쪽 트리를 클릭하여 오른쪽 패널에서 이벤트를 가져올 수 있습니다. 그들이 "Target"을 클릭하면 오른쪽 패널의 모든 DOM 노드를 동적으로 만든 다음 클릭 한 항목으로 스크롤하려고 시도합니다. 스크롤링 부분은 상단 및 하단 노드에서 작동하지만 중간 노드에서는 오프셋됩니다.

Answer 1

하나의 옵션은 dojox.fx.smoothScroll을 활용할 수 있습니다.

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

smoothScroll의 API의 문서가 인정 하듯이 최소한하지만 당신이 그것에 개체를 전달할 수있는 매개 변수의 몇 가지를 설명 않습니다. http://dojotoolkit.org/api/dojox/fx/smoothScroll - 부수적으로 API 사이트에서는 dojox.fx.smoothScroll 변종을 사용하여 동일한 작업을 수행합니다.

Answer 2

이것이 합법적인지는 확실하지 않지만 dojox.fx.scroll 코드를 가져 와서 위에서 언급 한 '오프셋'기능을 추가했습니다 (필자도 필요함).

Chrome 디버거를 사용하여 dojox.fx.scroll 코드를 가져 와서 내 스크립트 폴더의 새로운 .js 파일에 붙여 넣기 시작했습니다.

'정의'문자열의 이름을 dojox/fx/scroll에서 dojox/fx/scrollMod로 변경했습니다. 또한 참조를 .smoothScroll에서 .smoothScrollMod로 변경했습니다.

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

그리고 마지막으로 호출 :

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

이 그럼 당신은 정상적인 스크립트와 같은 HTML 파일에서이 파일을 참조 :

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