当div有参数隐藏时，jQuery自定义内容滚动条不显示

Question

我的网站上有 jQuery 自定义内容滚动条，位于 div 内。 div 内容具有参数 ("#content").hide()。当页面加载并且 jQuery 自定义内容滚动条完美运行时，div 可见。

但是，如果页面加载时 div 内容不可见，则 jQuery 自定义内容滚动条不可见且不起作用。我注意到当您缩小或放大窗口时，会显示滚动条。我在这个 URL 上有一个小例子:http://www.frantatoulen.wz.cz/

问题可能出在哪里？

Answer 1

问题是当 #content 隐藏时，插件脚本无法计算内容长度(隐藏元素的维度为零)。因此，该脚本假定内容不需要滚动条。

解决方案A:

在内容切换并变得可见后，您需要调用插件的 update 方法(插件主页有有关使用方法和参数的信息和示例)。在点击函数内，在末尾添加以下内容:

$("#tlacitko").click(function(){
    $("#content").toggle();
    $("#content").mCustomScrollbar("update");
});

注意:当您调整浏览器大小时，滚动条确实可以工作，因为它会在窗口调整大小事件时自动调用更新方法。

解决方案B:

您只需将updateOnContentResize选项参数设置为true即可。每次内容长度发生变化时，都会自动调用 update 方法:

$("#content").mCustomScrollbar({
    advanced:{
        updateOnContentResize:true
    }
});