ExtJS 4.0.7 scrollTo() 滚动但不移动滚动条滑块?

问题描述

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

I have a tree panel and am trying to do an animated scroll to certain locations. I'm doing something like this:

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

视图滚动到正确位置，但滚动条中的滑块"不动.任何想法为什么?

The view scrolls to the correct location, but the "slider" in the scroll bar doesn't move. Any ideas why?

一些附加信息:如果我改为执行以下操作，滚动条滑块会正确移动(但当然 scroll() 不支持动画——我更喜欢使用 .scrollTo() 以便用户可以看到滚动):

Some additional info: if I do the following instead, the scrollbar slider moves correctly (but of course scroll() doesn't support animation--I'd prefer to use .scrollTo() so the user can see the scrolling):

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

感谢您的帮助/建议！

推荐答案

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

@MoleculeMan's suggestion of disabling the custom scrollbars (which ExtJS uses in 4.0.x but not in 4.1) does work. After doing this you can call myTreePanel.getView().getEl().scrollTo('top', yCoord, true) and everything works as expected: scrolling is animated and the scrollbar moves. The only problem is that it seems to break the ability for the view to scroll if you use the up/down arrow keys to move through the tree.

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

It's not very elegant, but the work-around I'm going to use is this:

// 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() 的计时器调用将是不必要的，但不应中断任何东西).

This has the cosmetic disadvantage of the scroll bar "jumping" into place instead of smoothly moving with the animation, but the benefit of not breaking the up/down key scrolling. Also, because it doesn't involve changing config params or overriding the tree view's style, I'm assuming it will still work once we upgrade to ExtJS 4.1 (i.e., the timer call to setScrollTop() will be unnecessary but shouldn't break anything).

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

Note that calling setScrollTop() moves the scrollbar, but also causes the view to "jump" to that position. You therefore need to ensure that the timer doesn't fire until after the animation finishes. I'm actually using some custom code to poll every 10ms and see if the destination row is visible, then calling setScrollTop(), instead of using a timer that always waits for some hard-coded amount of time:

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 坐标(绝对)是否在树视图框的顶部和底部之间.

The isTreeElementWithinVisibleArea() function just checks to see if element's current Y coordinate (absolute) is between the top and bottom of the tree view box.

这篇关于ExtJS 4.0.7 scrollTo() 滚动但不移动滚动条滑块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！