mCustomScrollbar - scrollbar only appearing on F12 press (dev tools / Firebug) and not on hidden elements/divs

Question

Having a weird problem with mCustomScrollbar - Similar problem here:

stubborn prolem with popular custom scrollbar

The scrollbar doesn't show until you re-size the window or hit F12 (tested on both IE9 and FF - so Developer and Firebug). As soon as you do either, the code kicks in. The elements are initially hidden, and shown either using .show() or .fadeIn()

CSS:

.info-text {
    width: 230px;
    height: 170px;
    overflow: hidden;
    display: block;
}

HTML:

<p class = "info-text">
Lorem...
</p>

JS:

$(".info-text").mCustomScrollbar();

The JS is held within a $(window).load(function(){...

score 5 · Answer 1 · answered Jul 09 '13 at 08:14

5

you could try ,at init time, to use the property

advanced:{  
    updateOnContentResize:true,   
    updateOnBrowserResize:true
  }

so you should have something similar to:

$(".info-text").mCustomScrollbar({
   advanced:{  
    updateOnContentResize:true,   
    updateOnBrowserResize:true   

  } 
});

answered Jul 09 '13 at 08:14

Stormsson

1,391
2
16
29

Awesome hint! I had a similar problem and my scrollbars are now working! Thanks so much, dude!!!:) – drpelz Feb 27 '14 at 15:28

score 1 · Accepted Answer · answered Nov 05 '14 at 17:35

Solved it. The reason that it wasn't firing was because I was trying to add the functionality onto a div that wasn't initially visible, and subsequently brought in using .fadeIn(). For some reason it doesn't like that. I had to use:

.mCustomScrollbar('update');

to bring in the scrollbar after the element was visible. So in my case it was:

$("#elementFadingIn").fadeIn(500, function() {

    $("#elementFadingIn .scrollableElement").mCustomScrollbar('update');

});

Then it worked.

mCustomScrollbar - scrollbar only appearing on F12 press (dev tools / Firebug) and not on hidden elements/divs

2 Answers2