Show the correct scroll-position if the total length of the element is known

[szabyg]

Would it be thinkable to add the feature (similar to clusterize.js) that the correct scroll position is shown if the total length of the list is shown?
Clusterize.js inserts a placeholder element on the top and one on the bottom with the height adjusted.

[mfeingold]

Well, scroller uses similar approach to force the scroll bar to work. There are padding elements one on top and another on bottom of the viewport. The height of the padding element is adjusted as more elements are retrieved from the dataset.
Exposing these values in some manner would be pretty easy, but here is the rub: they are very imprecise. With the scroller you can request your elements starting from arbitrary point of the dataset without knowing anything about the size of the dataset. As you scroll the control, the height of the padding elements is adjsted. What is even worse, the height of elements which have been accessed in the past could've changed i.e. if the element has been collapsed.
So those heights would be a very rough approximation - good enough to ensure that the scroll bar would do its job, but hardly useful for anything else.

Can you think of some way to make it more useful?

[hohl]

I'm using ui-scroll for a chat log so most of the time the user starting from the bottom is scrolling up. There are do different things, my testers claim about:

• Scrollbars jumping around and not being informativ (+ Pos1/End key isn't working because of that)
• Scrolling on mobile is terrible, which is mainly because you often still drag the scroller while the component already loaded new content and so wanted do reposition the viewed area which failes since the user still holds touch down

Since all my content is of various length (but at least in average it would always between one or two lines) I still guess that it would help to at least have some kind of point of reference for the user how much content there is still left for them.

[ftorghele]

I'm using ui-scroll for displaying simple lists, therefore I know the exact height of every list item. In my current usecase I disabled the infinite scrolling by not loading items with an index of <1 or greater the lists length.

As @hohl mentioned, the scrollbar is not informative for the user at all if it's changing the size all the time.

The behavior makes sense if the list has infinite scrolling, but not in my case.

[mfeingold]

@ftorghele @hohl Scrollbar behavior is controlled by 2 padding elements automatically added to the list - one on top and another one on bottom. The way it is currently done is that initially the height of both of them is set to 0. as the items are removed from DOM, the height of removed items is added to the height of the padding elements. As they are added back the height of the appropriate padding is subtracted from the appropriate padding.

From the standpoint of the scroller behavior all of this is not really necessary. I implemented it this way to give the user the feel of how many items are out there without pulling in the entire dataset. I see your point and I am open to suggestions. For instance one way of dong this would be to expose the padding elements through the adapter and this way to give you full control over them

[AlSherif]

I also think a solution for this would be very useful. Exposing the padding elements would actually help.
Another option could be to input the amount of total elements and an element height to use for the calculation of the padding.

[mfeingold]

@AlSherif actually I am working on implementing this. The code is already in the master, I am holding back on documenting and releasing it because I am trying to resolve a few edge cases, still. Check out the 'minIndex' and 'maxIndex' (undocumentd so far) properties on the datasource. You can also assign values to the properties if they are known. The scrollbar will always be adjusted to reflect the (maxIndex - minIndex) * avgItemHeight height. If you will find time to play with this please let me know how did it work for you

[AlSherif]

@mfeingold I checked it out... it seems the newest changes are not reflected in the javascript, I can only find the min/maxIndex in the coffeescript file.

[dhilt]

@AlSherif yeah, we still have no js-artifacts auto deployment, we do it via 'grunt build' and then commit the results...

[AlSherif]

@mfeingold alright... so I tested it. It seems to work pretty well, there is only one problem... the scrollbar only shows the proper length after you start scrolling.
The way I do it is like this: make the data available to the datasource, then set datasource.max/minIndex then call adapter reload() - this does not update the scrollbar until after I scroll. Is there a chance for an easy fix?

[dhilt]

btw, the latest artifacts are in 'master'...

[AlSherif]

Yes, I checked out the latest commit of the master branch. Do you have any info on the issue I posted above?

[AlSherif]

@dhilt @mfeingold Hi guys, I just wanted to give you some more feedback. We had two issues:

1. the scrollbar only updated to reflect the min/maxIndex Values after scrolling, not after adapter.reload() calls
2. using a list of 3000 entries, extensive scrolling over many entries can lead to a stuck state, where ui-scroll will constantly jump between two get() calls from the datascource, but never display the results, while the scrollbar is jiggling up and down. This also happens if min/maxIndex are not used.

Because of that we went back to use the 1.3.2 version.
Its a great feature though and we would love to use it in the future.

[dhilt]

@AlSherif could you please provide us with a repro of your 2nd issue? if it's something serious then we'd like to fix it...

[AlSherif]

@dhilt https://github.com/AlSherif/AngularUIScrollDemo.
very easy to reproduce. I just used a list with 3000 entries and if u scroll excessively and fast (using two finger swipes on mac) and then stop, the list gets stuck regularly, the scrollbar jiggling and the code executing alternating viewsource requests continuously.
Hope it helps!

[AlSherif]

@mfeingold @dhilt Any update on this?

[dhilt]

@AlSherif I was able to run your demo, thanks, and here as I see we have an issue of different height items. When I set style="height: 100px" on each row the problem is gone. Right now we are working on scrolling optimization (this branch) and there we have a slightly better behaviour for your case, but we need more time to dig into it.

[mfeingold]

@AlSherif check the 1.4.1 version