FireFox中的slimScroll.js + iframe问题

Question

我在FireFox中遇到了一个slimScroll / jQuery UI的问题，只在加载内容时使用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>

就这样。

Answer 1

通常，所有jQuery滚动条都会计算应用它的容器的高度/宽度，以便在其上放置滚动条。

当您在jQuery中执行display:none ()时，它会执行一个hide，元素根本不会呈现，因此没有自己的高度/宽度。因此，您看不到slimscroll。(您将在其他jQuery滚动中发现类似的问题)。

要克服这种情况，可以在取消隐藏后调用$('#scroll').slimScroll()。在这种情况下，只有当iframe在相同的域中时才有可能。

或者一种更好的方法，不要使用hide()，而是使用

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

Answer 2

我认为框架被附加到主体中，但不能与DOM绑定，您应该使用document绑定iframe并尝试

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

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

希望你能理解。