Problem with onAfterPrepend - buffer.effectiveHeight

[oxprodriguez]

I'm having an odd issue, that's only happening on one of the ui-scrolls I have. Whenever I pass the buffer threshold scrolling down, and try to scroll up again (using either the wheel or the arrow of the scrollbar) this line of code forces a scroll back down, producing a "bouncing" effect wich prevents me from getting to the top:

var paddingHeight = topPadding.height() - height;
                    if (paddingHeight >= 0) {
                        topPadding.height(paddingHeight);
                    } else {
                        topPadding.height(0);
                        viewport.scrollTop(viewport.scrollTop() - paddingHeight); // <-- this
                    }

This happens because topPadding.height() gets the total sum of the actual height of every element (in my case 45px) and height gets a higher value (the difference of element.offset().bottom - element.offset().height), and thus forces a scroll down (since paddingHeight is a negative number, it adds up). In my element list, when trying to fetch the first 3 items, the values are:

topPadding.height() = 135 (45px 3) height = 210 (70px 3) paddingHeight = -75px --> viewport.scrollTop(viewport.scrollTop() - (-75));

I don't quite understand the scenario for this scrollTop, but as far as I tested, if I remove it, everything works as expected.

[dhilt]

@oxprodriguez Thanks for the issue, it would be very helpful if you could provide us with a runnable repro on plunker or somewhere else (plunker sample).

For example, you have buffer-size = 10. Initially you have 1 - 19 downward rows and -9 - 0 upward rows (upward rows are out of visible part of the viewport). When you do a scroll top (max), you fetch -19 - -10 items, prepend them to DOM, and find yourself at the very top position. Then the onAfterPrepend works, it moves you to 10 * itemHeight px down. And you have -9 - ... rows in the visible part of the viewport and -19 - -10 rows int the invisible part of the viewport. Without that condition it would not work and you'll fall into a situation when you fetch more and more items and move to the very top position again and again. That backward jump is necessary in this case.

But what is your case? I don't understand fully your situation. If your buffer-size = 3 and itemHeight = 45px, why do you have 1 fetched rows height = 3 70px and not = 3 45px? The repro is really needed!