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

我有一个树面板，我正试图做动画滚动到某些位置。我在做这样的事情：ExtJS 4.0.7 scrollTo（）滚动但不移动滚动条滑块？

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

视图滚动到正确的位置，但在滚动条中的“滑盖”不动。任何想法为什么？

一些额外的信息：如果我做了以下代替，滚动条滑块正确移动（但当然scroll（）不支持动画 - 我宁愿使用.scrollTo（），所以用户可以看到滚动）：

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

感谢您的任何帮助/建议！

来源

2012-01-25 Clint Harris

@ 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（）会移动滚动条，但也会导致视图“跳转”到该位置。因此，您需要确保定时器在动画完成后才会触发。实际上，我使用一些自定义代码来轮询每隔10ms，看看目的地行可见，然后调用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坐标（绝对）是否在树视图框的顶部和底部之间。

来源

2012-01-27 16:45:21

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

myTreePanel.verticalScroller.setScrollTop(yCoord);

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

来源

2012-01-26 06:19:00

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

回答

相关问题