ExtJS 4.0.7 scrollTo（）滚动但不移动滚动条滑块？ [英] ExtJS 4.0.7 scrollTo() scrolls but doesn't move scroll bar slider?

问题描述

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

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（）不支持动画 - 我'd喜欢使用.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（）会移动滚动条，但也会导致视图跳转到该位置。因此，您需要确保定时器在动画完成后才会触发。我实际上正在使用一些自定义代码来轮询每10ms，看看目的地行是否可见，然后调用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（）滚动但不移动滚动条滑块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！