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問題

回答

相關問題