jamesflorentino/nanoScrollerJS — Issue #27: margin-{top,bottom} on .pane causes hiding to stop working
Author: jodal
Created: 2012-03-09 14:11:19+00:00
State: open

I want to style the scrollbar so that it has 5px of space above and below `.pane`. In other words, make `.pane` shorter than `.content`.

If I use e.g. `.pane { margin: 5px 0; }` to achieve this, I break the hiding of the scrollbar when it is not needed. This is because nanoScroller checks if the `.pane`'s (inner) height is equal or larger than the content area's height. If the check instead was made using `.outerHeight(true)` (`true` to include margins) instead, my restyling would not break the hiding of the scrollbar.

Alternatively, I can add `.slider { margin: 5px 5px 5px 0; }`. If so, I do not disturb the hiding and it adds spacing above the slider. Below the slider, there is no spacing, since the positioning of the slider does not take it's margin into account.

I hope this either can be fixed in nanoScroller, or that you have an alternative way to style `.pane` so that it is a bit shorter than `.content`.