Question

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

Answer 1

嘿伙计们我这样做了：）

在发送之前将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",
            });               
        }
    }); 
});

Answer 2

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

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

Answer 3

已经有一段时间了，所以我猜你已经找到了解决方案。如果没有，您的代码是正确的，一点。执行.load后，使用它的回调函数启动此命令：

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

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

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

Answer 4

$('.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

Answer 5

简单地将脚本嵌入到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);
    }
});

Answer 6

当你通过ajax window.load加载页面时，不会被调用，所以mCustomScrollBar没有被初始化。当ajax文件就绪的页面加载时会被触发。

尝试以下代码。

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

Answer 7

首先销毁{ "name": "Debug Attach", "type": "Ruby", "request": "attach", "cwd": "${workspaceRoot}", "useBundler": true, "pathToBundler": "/path/to/rubygem/wrappers/bundle", "pathToRDebugIDE": "/path/to/rubygem/gems/ruby-debug-ide-x.x.x/bin/rdebug-ide", "remoteWorkspaceRoot": "bin/rails", "remoteHost": "127.0.0.1", "remotePort": "3000", "showDebuggerOutput": true }。

mCustomScrollbar

放入您的$(".YOUR-CONTENT-DIV").mCustomScrollbar("destroy");数据

HTML

为$('.YOUR-CONTENT-DIV').html('HTML');创建一个mCustomScrollbar

div

Answer 8

请参阅此reference

代码：

  $('#content_1').mCustomScrollbar("destroy");
  $('#content_1').append('some text or another things');
  $('#content_1').mCustomScrollbar();

jQuery mCustomScrollbar没有处理ajax内容

8 个答案: