从ajax加载时总是获取mCS_no_scrollbar类

Always getting mCS_no_scrollbar class when loading from ajax

本文关键字：mCS no scrollbar 获取 ajax 加载      更新时间：2023-09-26

我正在使用jquery CustomScrollbar插件。链接http://manos.malihu.gr/jquery-custom-content-scroller/

我正在通过ajax加载我的数据。代码如下

  $(window).load(function(){
        $(".top-heading-section3").mCustomScrollbar({
                advanced:{
                    updateOnContentResize: true
                }
            }
        );
    });

当ajax完成时，我会：

$(".top-heading-section3").mCustomScrollbar('update')

但我仍然在所有div上得到mCS_no_scrollbar类，并且滚动条没有出现。

我哪里错了？

我认为问题是，在滚动条样式附加到元素之前，您可能插入了Ajax请求中的数据，然后插件错误地假设div的当前大小是设置的大小，并且在增加滚动条之前不需要滚动条。我遇到了同样的问题，我用setTimeout函数解决了它。设置要附加mCustomScrollbar的div的高度也很重要。否则，它将在添加内容时调整div的大小。

setTimeout(function(){
  $('.top-heading-section3').mCustomScrollbar();
}, 600);

我将其设置为600毫秒只是为了确保它得到渲染，但您可以在测试时对其进行修改，以便在尽可能短的时间内进行渲染。

另请参阅这个链接，它也帮助我解决了我的问题。

https://github.com/malihu/malihu-custom-scrollbar-plugin/issues/237

您应该在使用ajax函数将html附加到dom后应用customrollbar。这种方式更有效、更可靠。

  $.ajax({
    url: "test.html",
     cache: false,
     success: function(html){
     $(".container").append(html);
      $(".top-heading-section3").mCustomScrollbar({
            advanced:{
                updateOnContentResize: true
            }
        }
       );
     }
    });

这会很好用的。

相关文章：