mCustomScrollbar - 滚动条仅出现在F12上(开发工具/ Firebug)而非隐藏元素/ div

时间:2013-05-22 09:41:02

标签: jquery css scrollbar custom-component mcustomscrollbar

mCustomScrollbar有一个奇怪的问题 - 这里有类似的问题:

stubborn prolem with popular custom scrollbar

滚动条不会显示,直到您重新调整窗口大小或按F12(在IE9和FF上测试 - 所以Developer和Firebug)。只要你这样做,代码就会启动。元素最初是隐藏的,并使用.show()或.fadeIn()显示

CSS:

.info-text {
    width: 230px;
    height: 170px;
    overflow: hidden;
    display: block;
}

HTML:

<p class = "info-text">
Lorem...
</p>

JS:

$(".info-text").mCustomScrollbar();

JS保持在$(window).load(function(){...

之内

2 个答案:

答案 0 :(得分:5)

您可以在初始时尝试使用该属性

advanced:{  
    updateOnContentResize:true,   
    updateOnBrowserResize:true
  } 

所以你应该有类似的东西:

$(".info-text").mCustomScrollbar({
   advanced:{  
    updateOnContentResize:true,   
    updateOnBrowserResize:true   

  } 
});

答案 1 :(得分:0)

解决了它。它没有被触发的原因是因为我试图将功能添加到最初不可见的div上,然后使用.fadeIn()引入。出于某种原因,它不喜欢这样。我不得不使用:

.mCustomScrollbar('update');    

在元素可见后引入滚动条。所以在我的情况下它是:

$("#elementFadingIn").fadeIn(500, function() {

    $("#elementFadingIn .scrollableElement").mCustomScrollbar('update');

});

然后它奏效了。