ui-scroll buffer space at the top of viewport

Question

I'm working with ui-scroll from angular-ui (great job, the component is awesome!).

Everything works well for the most part. Data is loaded from custom datasource as I scroll down. However, when I scroll back to the top, I end up with a lot of whitespace within the viewport.

Upon inspection, it looks like ui-scroll is adding a sub-div and setting the height dynamically, but for some reason this isn't getting set back to 0 when I scroll to the top of the viewport.

I'm guessing this has to do with the way my datasource is serving data. I'm also not wrapping my head around the negative indexing. Could someone explain how I should be accounting for a negative index in the datasource.get() function when I'm mapping to a standard pagination service (index + offset, etc)?

Answer 1

Alright, I think I found the solution... Hopefully this will help someone else because I couldn't really find a working example in the demos provided by the angular-ui team.

Essentially, when you receive a negative index, you have to 1) clamp the index to 0 and then adjust the count variable by the difference.

Here's some sample code:

    dataSource.get = function (index, count, successCallback)
    {
        // Index provided is 1-based, we'll convert to 0-based and clamp at 0
        var realIndex = Math.max(1, index) - 1;

        if (index < 0) {
            count -= 1 - index;
        }

        if (realIndex < 0 ||
            count == 0 || 
            realIndex >= vm.searchResultCount)
        {
            successCallback([]);
            return;
        }

        ...
        Make a pagination call to a service that expects the first 
        page of results to be at index 0.

Answer 2

Ui-scroll datasource implementation in case of limited data array may look like this

var min = 1, max = 100;
dataSource.get = function(index, count, success) {
    var start = Math.max(min, index);
    var end = Math.min(index + count - 1, max);
    if (start <= end) {
        getDataAsync(start, start + end + 1).then(success);
    }
    else {
        success([]);
    }
};

This allows you to deal with data arrays starting with min index. Also you may easily remove the limitation on bottom via var end = index + count - 1.

But I also would like to say, that it may be a back end responsibility. Look at this sample: https://rawgit.com/angular-ui/ui-scroll/master/demo/append/append.html – data array is limited from 1 to 50 while the datasource (skipping details) is just

get: function (index, count, success) {
    Server.request(index, count).then(success);
}