1

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.

Grevling
  • 456
  • 4
  • 18
Mark Löwe
  • 572
  • 1
  • 10
  • 24

3 Answers3

7

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();
Code Spy
  • 9,626
  • 4
  • 66
  • 46
0

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.

LeGEC
  • 46,477
  • 5
  • 57
  • 104
  • Exactly. I have a version working now using resize() HOWEVER it's completely losing my configuration parameters. It turns into a white bar with gutters, etc. My configuration is the default settings with a slight increase in width. I think I'm going to ditch the dynamic technique and just ensure the #div is always present. – Mark Löwe Oct 09 '13 at 09:56
0

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.

Cliff T
  • 227
  • 2
  • 11