jQuery mCustomScrollbar not working on ajax content

问题:

    $(window).load(function(){                 $("#content_1").mCustomScrollbar({                     scrollButtons:{                         enable:true                     }                 });  // ajax code function beauty_of_ceylon() {   $('.content-text').html('<p style="position:absolute;"><img src="images/ajax-loader.gif" /></p>');   $('.content-text').load("packages/beauty-of-ceylon.php"); } 

回答1:

$('.content-text').load("packages/beauty-of-ceylon.php", function () {     $("#content_1").mCustomScrollbar({         scrollButtons:{             enable:true         }     });     $content = '<button id="update" onclick="$('#content_1').mCustomScrollbar('update');" style="display:none"></button>';     $('.content-text').append($content);     setTimeout("$('#update').click();",10); }); 

It work for me :D

回答2:

I believe .load() is asynchronous, which means it continues running the script during the .load() call. So you have to call the mCustomScrollbar in the callback function, otherwise the content won't be there yet. So try this

$('.content-text').load("packages/beauty-of-ceylon.php", function () {     $("#content_1").mCustomScrollbar({         scrollButtons:{             enable:true         }     }); }); 

回答3:

Hey guys I did this :)

Destroy it when ajax before send and clear your div.Please check comments

$(document).ready(function(){     $(".YOUR-CONTENT-DIV").mCustomScrollbar({         theme:"dark",     });       $.ajax({         url: "YOUR AJAX URL",         type: "post",         data: data,         beforeSend: function() {             $(".YOUR-CONTENT-DIV").mCustomScrollbar("destroy"); //Destroy             $('.YOUR-CONTENT-DIV').html('<div class="loading">Loading ...</div>'); //clear html because it will show normal scroll bar         },         success: function(data) {             $('.YOUR-CONTENT-DIV').html(data);         },         complete: function () {              $(".YOUR-CONTENT-DIV").mCustomScrollbar({                 theme:"dark",             });                        }     });  }); 

回答4:

It's been a while so I'm guessing that you found a solution already. If not, your code is correct, to one point. After you do a .load, use it's callback function to initiate this command:

$(selector).mCustomScrollbar("update"); 

On their website it says that whenever you update the content, you must call this function so the mCustomScrollbar recalculates height of content, scrollbar etc.

http://manos.malihu.gr/jquery-custom-content-scroller/

回答5:

Simply Embed the script into the JSON/AJAX call content, such as:

1.JSON/AJAX back-end script (myscript.vendor, such as Ruby, PHP...)

var myHTMLContent = '<script>     $(".popover-n-content").mCustomScrollbar({         theme:"dark",         scrollInertia:100     });     </script>     <div>      <-- Manipulate -->     <other_html_tags>     ...     </other_html_tags>     </div>'; 

2.Calling the script "myscript.vendor"

$.ajax({     url: "/get/myscript.vendor",     type: "post",     dataType: "html",     success: function (data) {         $('#data').html(data);     } }); 

回答6:

when you load pages through ajax window.load wont be called , so mCustomScrollBar is not initialized.when page loads by ajax document ready will be triggered.

try the below code.

$(document).ready(function(){     $("#content_1").mCustomScrollbar({                 scrollButtons:{                     enable:true                 }             }); }); 

回答7:

$(document).ready(function(){         (function($){             $(every_selector).on("hover",function(){                 $(".your_content_selector").mCustomScrollbar({                     theme:"dark-2",                     snapAmount:40,                     scrollButtons:{enable:true},                     keyboard:{scrollAmount:40},                     mouseWheel:{deltaFactor:40},                     scrollInertia:400                 });              });         })(jQuery);     });

文章来源: jQuery mCustomScrollbar not working on ajax content