jQuery niceScroll not working on Dynamic DIV

Mark Löwe picture Mark Löwe · Oct 9, 2013 · Viewed 8.9k times · Source

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

Code Spy picture Code Spy · Dec 16, 2013

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();