Dragger element can become too small

[HendrikZero72]

If you have a lot of content and little space the dragger can become too small. I have solved it, but can't submit a pull request because I have also made some other alterations to your code that might only be useful in my current project.

So the solution: in the HTML you can add something like this: <div class="scroll-area" ng-scrollbar min-height="30">

Then in the part where you define the flags object, around line 18:

var flags = {
    bottom: attrs.hasOwnProperty('bottom'),
    // I've used 6px as a default minHeight
    minHeight: attrs.minHeight ? parseInt(attrs.minHeight) : 6,
};

And in the part where you set the dragger.height, around line 177:

// Calculate the dragger height
var virtualDraggerHeight = Math.round(page.height / page.scrollHeight * page.height);
dragger.height = virtualDraggerHeight < flags.minHeight ? flags.minHeight : virtualDraggerHeight;

I posted some suggestions earlier today that might be a bit specific to my current project, but I think the suggestion above is pretty beneficial in general.

UPDATE: After some more testing I realised that my solution posted above was not complete yet. It also requires some refinement to the redraw function. The current algorithm does not take the dragger.height into account. You start to really notice this when there is a lot of content and the dragger is kept larger by the fixes above. However, this is just a general flaw in the function. Please see an updated version below:

var redraw = function() {
    thumb.css('top', dragger.top + 'px');
    var draggerOffset = dragger.top / (page.height - dragger.height);
    page.top = -Math.round((page.scrollHeight - dragger.height) * draggerOffset - dragger.top);
    transculdedContainer.css('top', page.top + 'px');
};

I haven't done any rigorous tests, but my first impressions are that it is now pixel perfect.

Thanks, Hendrik