asafdav / ng-scrollbar

A custom scrollbar written in pure AngularJS
MIT License
187 stars 70 forks source link

Rebuild and bottom not working #52

Open HendrikZero72 opened 8 years ago

HendrikZero72 commented 8 years ago

Hi,

Thanks for building the ng-scrollbar. I am using it in a situation where <li> items are being appended to an <ul> every second.This means I have to rebuild every second and also need to keep focus on the bottom. I have found some issues with this. For one I can offer a solution of sorts.

Issue 1: ng-scrollbar loses the bottom directive setting after the first build because flags.bottom is being set to false. This was for good reason because if we keep flags.bottom set to true, it could be that a user who's scrolled to a certain point gets scrolled to the bottom on a subsequent rebuild. I have added a flag called flags.keepAtBottom. In the rebuild function I have included some lines around line 237 like this:

if (attrs.hasOwnProperty('bottom')) {
    flags.keepAtBottom = dragger.top + dragger.height === dragger.trackHeight ? true : false;
}

And then in the buildScrollbar around line 208 I added another clause to set dragger.top:

if (rollToBottom || flags.keepAtBottom) {
    flags.bottom = false;
    dragger.top = parseInt(page.height, 10) - parseInt(dragger.height, 10);
}

The result is that when the scrollbar is right at the bottom and the content is being appended, it keeps focus on the bottom. If the scrollbar is not at the bottom, the behaviour is as normal. I can see some cases where this might not be desirable, but in my case it helps. Do with it what you like.

Issue 2: When the content is being appended and the scrollbar is being redrawn (not at the bottom). The content 'moves' upwards. When using a native scrollbar, a <li> item stays exactly in the same spot, the dragbar shrinks, and the area below the dragbar grows while more and more list items are being added. With ng-scrollbar I see the <li> item slowly moving up. I couldn't really figure out how to fix this...

Thanks again for building ng-scrollbar. I hope my input above helps.

Regards, Hendrik

reyx commented 8 years ago

Hi, you figured out how to solve this issue?