2 
    $(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");
}
4

8 回答 8

10

我这样做了：

在发送并清除您的div之前在ajax时销毁它。请检查评论：

$(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",
            });               
        }
    }); 
});
于 2016-08-12T22:14:42.863 回答
5

我相信.load()是异步的，这意味着它会在.load()调用期间继续运行脚本。所以你必须在回调函数中调用mCustomScrollbar，否则内容还没有。所以试试这个

$('.content-text').load("packages/beauty-of-ceylon.php", function () {
    $("#content_1").mCustomScrollbar({
        scrollButtons:{
            enable:true
        }
    });
});
于 2012-11-20T18:17:08.487 回答
2

已经有一段时间了，所以我猜您已经找到了解决方案。如果不是，那么您的代码在某一点上是正确的。完成后.load，使用它的回调函数来启动此命令：

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

在他们的网站上，它说每当您更新内容时，都必须调用此函数，以便 mCustomScrollbar 重新计算内容的高度、滚动条等。

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

于 2013-02-22T03:30:42.720 回答
2 
$('.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);
});

它对我有用：D

于 2013-04-25T15:54:42.350 回答
1

只需将脚本嵌入到 JSON/AJAX 调用内容中，例如：

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.调用脚本“myscript.vendor”

$.ajax({
    url: "/get/myscript.vendor",
    type: "post",
    dataType: "html",
    success: function (data) {
        $('#data').html(data);
    }
});
于 2014-08-14T20:47:54.687 回答
1

首先摧毁mCustomScrollbar.

$(".YOUR-CONTENT-DIV").mCustomScrollbar("destroy");

把你的HTML数据

$('.YOUR-CONTENT-DIV').html('HTML');

创建一个mCustomScrollbar为div

setTimeout(function() {

$(".YOUR-CONTENT-DIV").mCustomScrollbar({
    theme:"dark"
  });
}, 300);
于 2019-07-29T09:35:29.100 回答
1

请参阅此参考

代码：

  $('#content_1').mCustomScrollbar("destroy");
  $('#content_1').append('some text or another things');
  $('#content_1').mCustomScrollbar();
于 2020-06-04T08:48:49.673 回答
0

当您通过 ajax 加载页面时 window.load 不会被调用，因此 mCustomScrollBar 未初始化。当通过 ajax 文档准备好的页面加载时将被触发。

试试下面的代码。

$(document).ready(function(){
    $("#content_1").mCustomScrollbar({
                scrollButtons:{
                    enable:true
                }
            });
});
于 2013-03-21T14:34:25.313 回答