Question

我有一个树状面板，我正在尝试对某些位置进行动画滚动。我正在做这样的事情：

myTreePanel.getView().getEl().scrollTo('top', yCoord, true /*animate*/);

视图滚动到正确的位置，但滚动条中的“滑块”不会移动。有什么想法吗？

一些额外的信息：如果我执行以下操作，滚动条滑块正确移动（但当然scroll（）不支持动画 - 我更喜欢使用.scrollTo（）以便用户可以看到滚动）：

myTreePanel.getView().getEl().scroll('down', yDiff);

感谢您提供任何帮助/建议！

Answer 1

@ MoleculeMan建议禁用自定义滚动条（ExtJS在4.0.x中使用但不在4.1中使用）可以正常工作。执行此操作后，您可以调用myTreePanel.getView（）。getEl（）。scrollTo（'top'，yCoord，true），一切都按预期工作：滚动动画，滚动条移动。唯一的问题是，如果使用向上/向下箭头键在树中移动，它似乎会破坏视图滚动的能力。

这不是很优雅，但我要使用的解决方法是：

// Animated scroll of tree view
myTreePanel.getView().getEl().scrollTo('top', yCoord, true);

// Wait 300ms then sync the scroll bar with the tree view
setTimeout(function() {
    myTreePanel.setScrollTop(yCoord);
}, 300);

这具有美化缺点，即滚动条“跳”到位而不是随着动画平滑移动，但是没有打破上/下键滚动的好处。此外，因为它不涉及更改配置参数或覆盖树视图的样式，我假设它一旦我们升级到ExtJS 4.1仍然可以工作（即，对setScrollTop（）的定时器调用将是不必要的但不应该破坏任何东西）。

请注意，调用setScrollTop（）会移动滚动条，但也会导致视图“跳转”到该位置。因此，您需要确保计时器在动画结束后才会触发。我实际上使用一些自定义代码每10毫秒轮询一次，看看目标行是否可见，然后调用setScrollTop（），而不是使用总是等待一段硬编码时间的计时器：

var scrollToRowNum = 5;
var scrollToEl = getElementForNode(myTreePanel.getRootNode().childNodes[scrollToRowNum]);
var yCoord = scrollToEl.getOffsetsTo(scrollToEl.parent())[1];

// Animated scroll of tree view
myTreePanel.getView().getEl().scrollTo('top', yCoord, true);

// Check every 10ms to see if animation is done, then sync scrollbar
var timerId = setInterval(function() {
    if( myTreePanel.isTreeElementWithinVisibleArea(scrollToEl) ) {
        clearInterval(timerId);
        myTreePanel.setScrollTop(yCoord);
    }
}, 10);

isTreeElementWithinVisibleArea（）函数只是检查元素的当前Y坐标（绝对值）是否在树视图框的顶部和底部之间。

Answer 2

不足为奇。他们使用their own scrollbar。正确的代码是：

myTreePanel.verticalScroller.setScrollTop(yCoord);

但是，它也不支持动画。所以我建议摆脱自定义滚动条，因为我已经描述了here并使用原始代码。

ExtJS 4.0.7 scrollTo（）滚动但不移动滚动条滑块？

2 个答案: