jQuery mCustomScrollbar 不适用于 ajax 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13231199/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery mCustomScrollbar not working on ajax content
提问by AkilaH
$(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");
}
回答by Dishan TD
Hey guys I did this :)
嘿伙计们我这样做了:)
Destroy it when ajax before send and clear your div.Please check comments
发送前在ajax时销毁它并清除您的div。请检查评论
$(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",
});
}
});
});
回答by Byron
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
我相信.load()是异步的，这意味着它会在.load()调用期间继续运行脚本。所以必须在回调函数中调用mCustomScrollbar，否则内容还没有。所以试试这个
$('.content-text').load("packages/beauty-of-ceylon.php", function () {
$("#content_1").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
回答by Kristjan O.
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:
已经有一段时间了，所以我猜您已经找到了解决方案。如果不是，那么您的代码是正确的，有一点。在你做完之后.load，使用它的回调函数来启动这个命令：
$(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.
在他们的网站上说，无论何时更新内容，都必须调用此函数，以便 mCustomScrollbar 重新计算内容、滚动条等的高度。
回答by user2320561
$('.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
它对我有用：D
回答by Amit-Rlogical
First of destroy the mCustomScrollbar.
首先销毁mCustomScrollbar.
$(".YOUR-CONTENT-DIV").mCustomScrollbar("destroy");
$(".YOUR-CONTENT-DIV").mCustomScrollbar("destroy");
Put the your HTMLdata
把你的HTML数据
$('.YOUR-CONTENT-DIV').html('HTML');
$('.YOUR-CONTENT-DIV').html('HTML');
Create a mCustomScrollbarfor div
创建mCustomScrollbar于div
setTimeout(function() {
$(".YOUR-CONTENT-DIV").mCustomScrollbar({
theme:"dark"
});
}, 300);
回答by dud3
Simply Embed the script into the JSON/AJAX call content, such as:
只需将脚本嵌入到 JSON/AJAX 调用内容中，例如：
1.JSON/AJAX back-end script (myscript.vendor, such as Ruby, PHP...)
1.JSON/AJAX后端脚本（myscript.vendor，如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"
2.调用脚本“myscript.vendor”
$.ajax({
url: "/get/myscript.vendor",
type: "post",
dataType: "html",
success: function (data) {
$('#data').html(data);
}
});
回答by Kishorevarma
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.
当您通过 ajax 加载页面时 window.load 不会被调用，因此 mCustomScrollBar 不会被初始化。当页面加载由 ajax 文档就绪时将被触发。
try the below code.
试试下面的代码。
$(document).ready(function(){
$("#content_1").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
