Scrollbar not working after AJAX Loaded Content

Question

I am trying to load in a div using Ajax. The div does load in but the scrollbar that the div consists of is not working afterwards.

I have a Main.html where i load content from other html's into

<div id="content1" > </div>

I load the content like this:

$("#content1").load("home.html");

     $("#home, #product, #submit2").click(function(){
         if(this.id == "home"){
             $("#content1").load("home.html");
         }

         if(this.id == "product"){
             $("#content1").load("product.html");
         }

the content of home.html looks like this:

<script type="text/javascript">
        (function($){
            $(window).load(function(){

                $.mCustomScrollbar.defaults.scrollButtons.enable=true; //enable scrolling buttons by default
                $.mCustomScrollbar.defaults.axis="yx"; //enable 2 axis scrollbars by default

                $("#content-m").mCustomScrollbar({theme:"minimal"});

            });
        })(jQuery);
    </script> 


<div id="content-m" class="content">
                //bla bla...
    </div>

The scrollbar does work when not loaded with AJAX. So I am sure that is not the problem.

Can any one help me make my scrollbar work with Ajax?

Answer 1

Found the solution!

you need to call the scrollbar in the load function like this and not in the external home.html as i did.

$("#content1").load("home.html", function(){
             $("#content-m").mCustomScrollbar({theme:"minimal"});
         });

     $("#home, #product, #submit2").click(function(){
         if(this.id == "home"){
             $("#content1").load("home.html", function(){
                 $("#content-m").mCustomScrollbar({theme:"minimal"});

             });
         }

the content will now load and then scrollbar will work after the load.