CODEWITHSUNDEEP
javascriptjquery
Jen Mason
Jen Mason

Reputation: 144

mCustomScrollbar scrollbar display on hidden div

I've seen answers on here on how to do this, but I just can't get it to work. Maybe another set of eyes will help. I'm trying to get the scrollbar to appear in a div that popups when an image is clicked. Here's the code for that: ('modalcs' is the name of the div that pops up)

And the function:

 function update_scroll(theID) 
 {
   document.getElementById(theID).style.display = 'block';
   $(".scrollable").mCustomScrollbar("update");
 }

In my $(document).ready(function() I have:

$(".scrollable").mCustomScrollbar({
  theme:"dark-thick",
  scrollButtons:{
  enable:true,
  advanced:{  
  updateOnBrowserResize:true,   
  updateOnContentResize:true   
  }
 }
});

and I understand that on page load since the hidden div isn't seen, the scrollbar is unable to see its content.

TIA for any help!

Upvotes: 1

Views: 5810

Answers (1)

Maxim Krizhanovsky
Maxim Krizhanovsky

Reputation: 26719

The problem is that the "update" command does not operate on a collection, so if $(".scrollable") returns more than one element, it will update only the first one. Use $.each

$(".scrollable").each(function(){
   $(this).mCustomScrollbar("update");
});

On the other hand, since you are operating on 1 element, you can just change your function:

function update_scroll(theID) 
 {
   $('#' + theID).show().mCustomScrollbar("update");
 }

Upvotes: 1

Related Questions