使用Dojo ContentPanel滾動到某個位置

我的Dojo應用程序使用幾個內容窗格來顯示不同的信息位。主窗格中有大量的可滾動數據。我需要能夠按下按鈕跳轉到某些地方。使用Dojo ContentPanel滾動到某個位置

目前正在使用：

dojo.byId(iid).scrollIntoView();

這工作完全不同的是它似乎立足於瀏覽器窗口頂部的計算，而不是contentpanes'頂部。由於我的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的佈局。用戶可以點擊左側的樹來在右側面板中顯示一個事件。如果他們點擊「目標」，我會在右側面板中動態創建所有DOM節點，然後嘗試滾動到點擊的項目。滾動部分適用於頂部和底部節點，但對於中間節點是偏移的。

Screen shot of complete app

Illustration of my issue

來源

2011-02-14 Bitwize

說明：我的用戶羣是XP上的100％IE7（不是我的想法）。 – Bitwize 2011-02-17 23:13:36

一種選擇可能是採取dojox.fx.smoothScroll優勢。

例子：http://jsfiddle.net/kfranqueiro/6aNrp/

上smoothScroll的API文檔固然很小，但它確實說明了幾個，你可以在對象傳遞給它的參數。 http://dojotoolkit.org/api/dojox/fx/smoothScroll - 順帶一提，API網站使用dojox.fx.smoothScroll的變體來做同樣的事情。

來源

2011-02-15 05:17:46

我已經嘗試dojox.fx.smoothScroll沒有任何運氣。「偏移」屬性看起來很完美，但似乎並不奏效。在IE7/8和FF 3.6.9上測試contentpane會跳轉到正確的對象，但偏移量什麼都不做（嘗試正值和負值）。smoothScroll基本上與scrollIntoView的功能相同，儘管SMOOTHLY更加平滑。 – Bitwize 2011-02-17 23:18:18

不知道這是否合法，但我只是採取了dojox.fx.scroll代碼並添加了上述的'偏移'功能（我也需要它）。

我開始使用Chrome調試器抓取dojox.fx.scroll代碼，並將其粘貼到腳本文件夾中的新.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方法：

<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文件中像一個正常的腳本引用此文件像這樣（像你通常會，但與偏移對象）：

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

來源

2012-11-20 23:00:59

使用Dojo ContentPanel滾動到某個位置

回答

相關問題