FireFox中的slimScroll.js + iframe问题

仅当使用iframe加载内容时，我遇到了FireFox中的slimScroll/jQuery UI问题。该代码在所有其他浏览器中都能正常工作。FireFox中的slimScroll.js + iframe问题

如果您正常加载iframe，它可以正常工作。如果您将其隐藏起来（.hide（）或display：none;），它仍然会加载，但slimScroll可拖动栏将不会显示（仅存在轨道）。

我认为这是一个FireFox滚动问题，或者可能是一个jQuery UI可拖动问题。无论如何，我无法弄清楚。

脚本放在父页面（parent.html）：

 $(document).ready(function() { 
     var tip = $('<div id="tip" style="position:absolute;top:90px;left:190px;height:120px;' + 'width:275px;border:1px solid grey;z-index:2147483647;overflow:hidden;">' + "<iframe frameborder='0' scrolling='no' src='content.html' width='275px' height='120px' id='myiframe' type='content' style='display:block;visibility:visible'></iframe>" + '</div>'); 
     $('body').prepend(tip); 
     $('#showtip').click(function (event) { 
      $('#tip').show(); 
     }); 
     $('#tip').hide(); //comment this line out and it works correctly... 
     });

父页面还包含一个链接，显示的iframe：

<a href="#" id="showtip">Click to Show Iframe</a>

内容页脚本（content.html ）：

$(document).ready(function() { 
    $('#scroll').slimScroll({ 
     height: 95, 
     railVisible: true, 
     alwaysVisible: true, 
     allowPageScroll: false 
    });  
});

为content.html虚拟内容：

个

<div id="scroll">This is the iframe content area <p>This is the iframe content area</p> p>This is the iframe content area</p> <p>This is the iframe content area</p> </div>

JS需要参考：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script> 
<script type="text/javascript" src="https://raw.github.com/rochal/jQuery-slimScroll/master/slimScroll.min.js"></script>

就是这样。

来源

2012-10-26 Marc M

通常，所有jQuery滚动条都会计算应用该容器的容器的高度/宽度，以将滚动条放在上面。

当你在jQuery中隐藏（）时，它会做一个display:none，这个元素根本就没有渲染，因此没有它自己的高度/宽度。因此，你看不到一个slimscroll。（你会发现与其他jQuery卷轴类似的问题）。

要解决这种情况，可以在取消隐藏后调用$('#scroll').slimScroll()。在这种情况下，只有iframe在同一个域中才可能。

或者更好的办法，不使用hide()，而是使用

$('#tip').css('visibility','hidden');和$('#tip').css('visibility','visible');

来源

2012-11-04 06:40:09 Jashwant

使用$（ '＃提示'），CSS（ '知名度'， '隐藏'）。以及$（'＃myiframe'）。css（'visibility'，'hidden'）;似乎做的伎俩，谢谢！ –

我认为帧是追加到身体，但不能与DOM绑定，您应该绑定iframe与document和尝试

$("#showtip").live('click',function(){ 

    //use .live instead of `click` 
});

希望你能理解。

来源

2012-11-04 03:14:24 Rajnish

FireFox中的slimScroll.js + iframe问题

回答

相关问题