1

コンテンツ iframe が読み込まれると、jQuery アコーディオンが左に跳ね返ります。私は困惑しています。

助言がありますか？

私はそれがiframeのサイズ変更コードにあると推測しています。

$(function() {
    $( "#accordion" ).accordion({
        collapsible: true, 
        active: false
    });
});

jsFiddle のアコーディオン

4

2 に答える 2

1

それほどクールではありませんが、次のような回避策を簡単に試すことができます。

$(function(){ $('.ui-accordion-header').on('click',function(){
        if($(this).hasClass('ui-state-active')){
         $('body').css('overflow','hidden');
        }else{
        setTimeout(function(){
         $('body').css('overflow','auto');
         },600);
        }
        });
        });

作業例はこちら

于 2013-08-20T16:12:41.820 に答える
0

バウンスは、スクロール バーが表示されたときのブラウザの通常の動作です。IE 7 (私が思うに) などの古いブラウザーでは、スクロールバーは常に表示されていましたが、必要のないときは無効になっていました。したがって、バウンスは発生しません。

オーバーフローの調整

それを実現し、overflowプロパティを使用して、必要がない場合でもスクロールバーを常に表示することができます。

古いブラウザーと同じように、スクロールバーが必要ない場合は無効にし、必要な場合は有効にします。したがって、バウンスはありません。

次の CSS はそれを行います。

body {
    overflow-y: scroll;
}

デモ 1 - 常にスクロール バーを表示する

高さの調整

もう 1 つの方法は、ドキュメントの高さを 100% よりも少し高くすることです。したがって、スクロール バーも常に表示されますが、常に有効になっています。

そのために次の CSS を追加できます。

html {
    height: 101%;
}

デモ 2 - 大きな HTML ドキュメントの使用

DEMO 1は、より標準的なアプローチのようです。これは、以前のブラウザのように見え、無効にするとグレー表示されたスクロール バーがあまり見えないためです。

DEMO 2は、上記のオプションとは異なり、無効にされないスクロールバーは、コンテンツがスクロール可能なコンテンツでなくても、常にスクロール可能なコンテンツを示しているように見えるため、あまり好ましくない可能性があります。

JavaScript ソリューションを使用すると、コースから外れて機能する可能性がありますが、はるかに重く、保守/更新が面倒になる可能性があります。

于 2013-08-20T18:21:20.777 に答える