View Full Version : Scrolling to an item in the new List component

27 Dec 2012, 3:07 AM

With the way the new List component works how can I scroll to a specific item. The offsetTop method doesn't seem to work (because the item isn't rendered yet) and calculating the offset by adding item heights before reaching the targeted item doesn't work either because you have to scroll first for the items to be rendered.

The idea I have right now is to get the ViewItems, look for the targeted item inside them and scroll to it if I find it, otherwise scroll to the end of the current view (rendering a new set of items) and repeat the process until I find the targeted item. This can be optimized by first scrolling to (itemIndex - 1)*defaultItemHeight before beginning the hunt. The reason this first scrolling is not enough on its own is because of grouping headers that have to be taken into account.

Is there a way to do this more "easily"?

Thanks :)

29 Dec 2012, 7:24 AM
Use the scroller...

list.getScrollable().getScroller().scrollTo(x, y);

30 Dec 2012, 3:13 PM

The problem is the y coordinate. How do I get the coordinate of an item when it hasn't been rendered yet (the new list component doesn't render an item until you actually scroll to it).

14 Jan 2013, 2:05 PM
I am having the very same problem. This was easy to do before the infinite list, but as DrunkenBeard mentioned, it is much more difficult when there are list items that haven't been rendered.

14 Jan 2013, 2:27 PM
I dug into this a little more. I don't have a full implementation yet, but here are some hints.

After the list's painted event, you can still get the viewItems from the list, but they won't have any offsets to use with the scroller. In the element property of a viewitem, there is a getOffsetsTo method that returns a good offset from the top of the list even if the list is grouped and the item isn't rendered yet.

This should be enough to run with to scroll to a specific item.

5 Feb 2013, 1:44 PM
If you know the index of the item you want to scroll to, you can use something like this:

function scrollToSelectedItem(list, index) {
//console.log("scrollToSelectedItem: index=" + index);

var map = list.getItemMap();
var offsetTop = map.map[index];
var centeringOffset = 130;
if (offsetTop > centeringOffset)
offsetTop -= centeringOffset;
//console.log("OffsetTop=" + offsetTop);

var scroller = list.getScrollable().getScroller();
scroller.scrollTo(0, offsetTop, undefined);

20 Jun 2016, 4:53 AM
Its dont work for me I have error Uncaught TypeError: Cannot read property 'getScroller' of undefined

24 Jun 2016, 2:09 AM
Its dont work for me I have error Uncaught TypeError: Cannot read property 'getScroller' of undefined
Can u try set scrollable:true in list ?