Always getting mCS_no_scrollbar class when loading from ajax

Question

I am using jquery CustomScrollbar plugin. Link http://manos.malihu.gr/jquery-custom-content-scroller/

I am loading my data through ajax. The code is as below

  $(window).load(function(){
        $(".top-heading-section3").mCustomScrollbar({
                advanced:{
                    updateOnContentResize: true
                }
            }
        );
    });

And when the ajax is complete i do :

$(".top-heading-section3").mCustomScrollbar('update')

But still i get mCS_no_scrollbar class on all divs and the scrollbar is not coming.

Where am i going wrong?

Answer 1

I think problem is that you may be inserting the data from your Ajax request before the scrollbar styling is being attached to the element and then the plugin is incorrectly assuming that the current size of the div is the set size and that it doesn't require a scrollbar until it is increased. I had this same problem and I solved it with a setTimeout function. It's also important to set the height of the div that you are trying to attach the mCustomScrollbar to as well. Otherwise it will resize the div when content is added.

setTimeout(function(){
  $('.top-heading-section3').mCustomScrollbar();
}, 600);

I set it to 600ms just to make sure that it gets rendered, but you can modify it as you test it so that it renders in the shortest amount of time possible.

Also see this link that helped me solve my problem as well.

https://github.com/malihu/malihu-custom-scrollbar-plugin/issues/237

Answer 2

You should apply customscrollbar after appending the html into dom using ajax function. This ways is more efficient and reliable.

  $.ajax({
    url: "test.html",
     cache: false,
     success: function(html){
     $(".container").append(html);
      $(".top-heading-section3").mCustomScrollbar({
            advanced:{
                updateOnContentResize: true
            }
        }
       );
     }
    });

This will work fine.