1

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>

それでおしまい。

4

2 に答える 2

1

通常、すべての jQuery スクロールバーは、スクロールバーを配置するために、適用されるコンテナーの高さ/幅を計算します。

jQueryでhide（）を実行するdisplay:noneと、要素がまったくレンダリングされないため、独自の高さ/幅がありません。したがって、スリムスクロールは表示されません。(他の jQuery スクロールでも同様の問題が見つかります)。

状況を克服するには、$('#scroll').slimScroll()非表示を解除した後に呼び出します。この場合、iframe が同じドメインにある場合にのみ可能です。

またはより良い方法は、使用しhide()ないで、代わりに使用します

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

于 2012-11-04T06:40:09.077 に答える
0

フレームはボディに追加されていると思いますが、DOM とバインドできません。バインドiframeしdocumentて試してみてください。

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

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

ご理解いただければ幸いです。

于 2012-11-04T03:14:24.443 に答える