javascript - 使用 Dojo ContentPanel 滚动到特定位置

Question

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

目前正在使用:

dojo.byId(iid).scrollIntoView();

除了它似乎是基于浏览器窗口的顶部而不是内容 Pane 的顶部进行计算之外，这非常有效。由于我的内容 Pane 不在页面顶部(顶部有一个 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.scroll 代码并添加了上面提到的“偏移”功能(我也需要它)。

我首先使用 Chrome 调试器获取 dojox.fx.scroll 代码，然后将其粘贴到我的脚本文件夹中的新 .js 文件中。

我将“定义”字符串中的名称从 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();