slider position broken when dragging if scroll pane is not the same height as content

[flexphperia]

When in CSS I've added top and bottom values into .nano-pane class to create scrollbar lower than content height then clicking and draging slider are broken.

Here's demo:
http://jsfiddle.net/eR34B/

[kristerkari]

thanks for reporting.

[stereokai]

So... is this fixed? Thanks.

[kristerkari]

@stereokai Not yet. It would require so digging in the code to see why this happens.

[stereokai]

Ok thank you.

[erikhagreis]

Hi, I just dove into the code as I wanted to achieve the same effect. I made a small change in the javascript code, the reset function at line 727 of jquery.nanoscroller.js. (corresponds with line 664 in the coffee file)

before:
sliderHeight = Math.round(paneOuterHeight / contentHeight * paneOuterHeight);

after:
sliderHeight = Math.round(paneOuterHeight / contentHeight * paneHeight);

I used the idea that the ratio windowHeight / contentHeight should equal sliderHeight / trackHeight.

The 'before' code has the assumption that the height of the scroll window (1st paneOuterHeight reference) is equal to the height of the track (2nd paneOuterHeight reference). This is the default case but in different styling, the trackHeight is actually equal to paneHeight.

At first glance this simple change did the trick. Can you verify?

[kristerkari]

@erikhagreis Thanks for helping out!

I tried to reproduce the problem with the JSFiddle from @flexphperia and nanoScroller 0.8.5, but it seemed to work just fine for me: https://jsfiddle.net/eR34B/3/

Is there something still broken with the scrolling/dragging? If there is, could you provide a demo of the broken functionality?

[erikhagreis]

Yeah the issue only becomes apparent in some cases, where the contentHeight is only slightly greater than the trackHeight. I'll try to create a fiddle that demonstrates this.

[kristerkari]

@erikhagreis Thanks, that'd be great

[erikhagreis]

This fiddle shows the error: https://jsfiddle.net/pgzeLxre/2/
In this fiddle the error seems fixed: https://jsfiddle.net/pgzeLxre/3/

[kristerkari]

Alright, looks like the fix works. I'll need to run the demo / your code in different browsers to see that it does not break anything else. 👍

[erikhagreis]

thanks for checking :)

[kristerkari]

Should be fixed with release 0.8.6. Let's reopen if that is not the case.