Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dragger element can become too small #53

Open
HendrikZero72 opened this issue Jan 13, 2016 · 0 comments
Open

Dragger element can become too small #53

HendrikZero72 opened this issue Jan 13, 2016 · 0 comments

Comments

@HendrikZero72
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant