dynatree - 如何滚动到活动节点？

Question

我有具有固定高度和垂直滚动条的动态树。

节点.activate();选择我正在搜索的节点，但不移动垂直滚动条，因此我必须手动滚动才能看到活动节点。

我如何以编程方式滚动它？

---

感谢mar10，我解决了这个问题：

var activeLi = node.li;
$('#tree').animate({
    scrollTop: $(activeLi).offset().top - $('#tree').offset().top + $('#tree').scrollTop()
}, 'slow');

Answer 1

Dynatree 没有内置的scrollTo 功能。
但是，一旦您拥有想要使其可见的 DOM 元素，您应该能够使用现有的方法和插件之一。

在您的情况下，您似乎已经有一个 node 对象，因此您可以获得关联的

和 使用 node.li 或 node.span 标记。

一般来说，您可以随时通过调用

var node = $("#tree").dynatree("getActiveNode");
// or
var node = $("#tree").dynatree("getTree").getActiveNode();

then get 关联的 DOM 元素来获取活动节点：

var activeLI = node && node.li;

或处理激活事件：

onActivate: function(node) {
    var activeLI = node.li;
    ...
}

一旦获得该元素，请使用标准方法：

使用 jquery 滚动到 div ,
jQuery 滚动到元素 ，
如何滚动到 jQuery 中的元素？ ,
...

编辑 2014-05 从 Fancytree 开始添加了 2.0 autoScroll作为标准选项。

Answer 2

我遇到了类似的问题，并且无法让scrollTop按照上面的示例中所述工作。我通过将选择器从“#tree”更改为“.dynatree-container”来修复它：

$('.dynatree-container').animate({ // animate the scrolling to the node
  scrollTop: $(activeLi).offset().top - $('.dynatree-container').offset().top + $('.dynatree-container').scrollTop()
}, 'slow');

这应该可以让您继续前进并节省几个小时的挫败感（：

顺便说一句，我正在使用 dynatree 版本 1.22 和 jquery 1.8.3 和jquery 用户界面 1.9.2。

Answer 3

当页面上有多于一棵树时，使用 $('.dynatree-container') 时会出现问题，因为这将尝试选择具有该类的每一棵树。我有很多树，所以我需要选择具有特定 id 的树...但我发现，就像前一个人一样，尝试通过 id （例如“#tree”）选择树是行不通的。那么，什么会..？做类似 =$("#prevPageTree").dynatree("getTree").offset 的事情也不起作用......

几分钟后：好的，弄清楚如何做到这一点。在 Chrome 调试器中进行探索表明 .dynatree-container 类实际上附加到

。 dynatree 在 #tree 元素下插入的元素，用于初始化 dynatree 实例。所以你需要做类似的事情

$("#tree ul").animate({ // animate the scrolling to the node
     scrollTop: $(activeLi).offset().top - $('#tree ul').offset().top + $('#tree ul').scrollTop()
}, 'slow');

，如果像我一样，你不希望它将节点向右滚动到窗口顶部，那么

scrollTop: $(activeLi).offset().top - $('#prevPageTree ul').offset().top + $('#prevPageTree ul').scrollTop() - 150

会很好地将你的节点向下 150 像素