X Online Chat
please wait
close window

nanoScroller and resizing divs

pdfDownload as PDF


Although I try to avoid in-page scrollbars, there are times when this is necessary. nanoScroller is a nifty tool for easily adding stylized scrollbars to content areas inside your page. It even supports multiple scrolling divs in one page.

I recently ran into a snag. A page has a nano div which originally fills the width of the screen, large enough so that it can display its entire contents without scrolling.

However, the user can click a button which opens a new column in the right half of the screen, which makes the nano div thinner and now requires scrolling.

Under these conditions, the nano scrollbar doesn't automatically appear (although I could still use the mouse wheel to scroll the nano content).

I searched online, but couldn't find a solution for "resetting" the nano scroller when the div changes size. So I looked through the source code (yes, yes -- I should have done this in the first place) and found that the reset call is really simple:
$(".nano").nanoScroller();
Whenever the size of your nano div is changed, make this call and the nano scrollbar should adjust to fit. If you have multiple nano divs in the page, this call will reset all of them at once.