11

我有固定高度和垂直滚动条的 dynatree。

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

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

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

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

3 回答 3

8

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

在您的情况下，您似乎已经有了一个node对象，因此您可以使用or获取关联的<li>和<span>标签。node.linode.span

一般来说，您可以随时通过调用获取活动节点

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

然后获取关联的 DOM 元素：

var activeLI = node && node.li;

或处理激活事件：

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

拥有元素后，请使用标准方法：

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

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

于 2012-01-22T21:29:35.350 回答
5

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

$('.dynatree-container').animate({ // 动画滚动到节点
  scrollTop: $(activeLi).offset().top - $('.dynatree-container').offset().top + $('.dynatree-container').scrollTop()
}， '慢的'）;

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

顺便说一句，我使用的是 dynatree 版本 1.22 和 jquery 1.8.3 和 jquery ui 1.9.2。

于 2012-12-12T12:42:09.867 回答
0

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

几分钟后：好的，想出了如何做到这一点。在 Chrome 调试器中探索显示 .dynatree-container 类实际上附加到由 dynatree 在用于初始化 dynatree 实例的 #tree 元素下插入的 <ul> 元素。所以你需要做类似的事情

$("#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 像素

于 2013-07-28T14:52:33.733 回答