AJAX 加载内容后滚动条不起作用

Posted 2023-05-08

【中文标题】AJAX 加载内容后滚动条不起作用

【英文标题】：Scrollbar not working after AJAX Loaded Content

【发布时间】：2016-04-18 17:27:20

【问题描述】：

我正在尝试使用 Ajax 加载 div。 div 确实加载了，但 div 包含的滚动条在之后不起作用。

我有一个 Main.html，我在其中将其他 html 的内容加载到

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

我这样加载内容：

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

home.html 的内容如下所示：

<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>

滚动条在没有加载 AJAX 时可以工作。所以我确信这不是问题。

谁能帮我让我的滚动条与 Ajax 一起工作？

【问题讨论】：

有一个sn-p会很棒

这里有一个人据说已经解决了这个问题。虽然我无法真正弄清楚他在做什么。 ***.com/questions/16273099/…

【参考方案1】：

找到了解决办法！

您需要像这样在加载函数中调用滚动条，而不是像我那样在外部 home.html 中调用滚动条。

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

             );
         

内容现在将加载，然后滚动条将在加载后工作。