使用Dojo ContentPanel滚动到某个位置

Question

我的Dojo应用程序使用一些内容窗格来显示不同的信息位。主窗格具有大量可滚动数据。我需要能够按下按钮才能跳转到某些地方。

目前正在使用：

dojo.byId(iid).scrollIntoView();

这完全有效，除了它似乎是基于浏览器窗口顶部而不是contentpanes顶部的计算。由于我的内容窗格不在页面顶部（顶部有一个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节点，然后尝试滚动到单击的项目。滚动部分适用于顶部和底部节点，但是对于中间节点是偏移的。

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代码并添加了上面提到的'offset'功能（我也需要它）。

我首先使用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方法中添加了以下内容：

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