Adding margin above/below .pane without breaking pane hiding or bleeding over the bottom space about nanoscrollerjs

[jamesflorentino]

I tried doing the outerHeight(true) method. It did fix the scenario where the scroller is not needed. But now it bleeds the outer edge when it is. :-(

i've setup a html/css solution for this. http://bl.ocks.org/2007032

You should put the .nano container inside a layer with a padding value. Or add a margin rule to the .nano div content. This way, it allows the content layout to have a breathing space. (which I assume you were aiming for).

[jodal]

I forgot to say: my .pane is transparent, so it doesn't matter for me if I add margin to .pane, padding to .pane, or margin to .slider.

Your solution with putting padding on the element containing .nano, or margin on .nano, works for one of my use cases. Though, another of my use cases is using the scroller on a table of data. The table should have no margin at all, and be directly connected to the elements around it. The scroller should be positioned inside the table's border. For this case, adding padding on the element around .nano or margin on .nano doesn't help.

I've created to examples with a scroller inside a table:

• You can see the broken hiding of the scroller when not needed in the following example, which use margin on the .pane: http://bl.ocks.org/2020855
• In the other example, http://bl.ocks.org/2020898, I've used margin on .slider. Doing it this way, the hiding of the unneeded scroller works, but the slider length does not care about the slider's margin, so it is a bit too long, and bleeds into the space between the scroller and .content's bottom.

[michael-lefebvre]

Hi,

the easiest way is to change top and bottom properties of .pane, but you need to change a small portion of code to allow this:

michael-lefebvre@7079d46

[mrw4n]

What about creating a ratio between the pane height and the content height, and make ur calculations based on this?

use example is if i want to make a fixed height scrollbar, and the content area have different heights, something like the example on the right of this page:

http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

[jodal]

With the release of 0.5.7, this issue is resolved for me:

I can set .pane { top: 5px; bottom: 5px; }, and the pane is still hidden when it is not needed.

[kristerkari]

margin can now also be added since 712b871 so this is all fixed