javascript - 从 ajax 加载时总是获取 mCS_no_scrollbar 类

Question

我正在使用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 类，并且滚动条没有出现。

我哪里错了？

Answer 1

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

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

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

另请参阅此链接，该链接也帮助我解决了我的问题。

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

Answer 2

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

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

这将正常工作。