Firefox 中 slimScroll.js + iframe 的问题

Posted 2023-05-09

【中文标题】Firefox 中 slimScroll.js + iframe 的问题

【英文标题】：Issue with slimScroll.js + iframe in FireFox

【发布时间】：2012-10-16 11:49:12

【问题描述】：

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

如果您正常加载 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>

就是这样。

【参考方案1】：

一般来说，所有 jQuery 滚动条都会计算应用它的容器的高度/宽度，以便在它们上面放置滚动条。

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

为了克服这种情况，您可以在取消隐藏后拨打$('#scroll').slimScroll()。在这种情况下，仅当 iframe 位于同一域中时才有可能。

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

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

【讨论】：

使用 $('#tip').css('visibility','hidden');连同 $('#myiframe').css('visibility','hidden');似乎可以解决问题，谢谢！

【参考方案2】：

我认为 frame 是附加到 body 但不能绑定 DOM，你应该绑定 iframe 和 document 并尝试

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

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

希望你能理解。