jQuery niceScroll not working on Dynamic DIV

Question

I've been struggling with this problem for weeks, and I've researched dozens of posts on this site and others. I have a very basic problem. I have a DIV tag #scrollarea that is created on the fly, destroyed and recreated on the fly several times in a single web app. My problem is that the niceScroll feature only works ONCE. After the second attempt, I no longer get the controls

I've tried several techniques including the resize() method, and nothing works. I've also installed a regulator that ensures that it's only installed once, and then resize()'d after that. Again, nothing works.

It's a very difficult thing to demonstrate here given that my code is locked behind secure doors, and it's triggered through scripts.

Does anyone have a suggestion of how this can be done? To review:

• page loads, no #scrollarea is present
• script fires, and the #scrollarea is installed into a DIV
• niceScroll is attached to #scrollarea ONCE and works PERFECT
• script fires again, #scrollarea is replaced by NEW scrollarea
• regardless of what technique I use, the scrollbars no longer work

Methods attempted:

• Install niceScroll each time the new #scrollarea arrives
• Install niceScroll ONCE and never again
• Install niceScroll ONCE and then issue a getNiceScroll().resize()
• Attempted the .mouseover() -> .resize() technique

All techniques fail to render a usable scrollbar on the second use.

Answer 1

UPDATE: new function found!

 var setScroll = function(i) {
        if($(i).length>0)
        $(i).niceScroll().updateScrollBar();
} 

Call this function to Update niceScroll

setScroll(".classWithNiceScroll");

---

-----Old Method-----

use this instead of resize

$("idORclass").getNiceScroll().remove()
$("idORclass").nicescroll();

Answer 2

script fires again, #scrollarea is replaced by NEW scrollarea

What do you mean by that ? is your #scrollarea removed from the DOM, and a new one inserted ? or do you have its content replaced, like $('#scrollarea').html( blabla ) ?

Have you tried $(window).trigger('resize') ? nicescroll seems to watch for resize events, but not for DOM changes.

Answer 3

I had a similar problem using an empty div that I could add dynamic content to when certain events were triggered, however, upon adding content, the scrollbar would not appear. I got it to work by prepopulating the scrollbar div with another empty div with a height that overflowed the div I had the scrollbar on.