1

編集:言及するのを忘れていましたが、これは Chrome (最新バージョン) でのみ発生します。

これはセットアップです：

<fancyboxOverlay>
    <fancybox>
        <ContainerDiv>
            <MenuDiv>
            <ScrollableContentDiv>
                <ActualContentDiv>

ActualContentDiv が ScrollableContentDiv よりも長くなると、後者はスクロールバーを表示します。ボックス全体には、「次へ」ボタンを押して表示または非表示にする div (「ページ」) に関するフォームのみが含まれています。

これが問題です：

ページの 1 つが非常に長く、最後に「次へ」ボタンがあります。押すと次のページが表示されますが、ファンシーボックスも右と下に移動します。そして、fancybox だけでなく、fancyboxOverlay も同様です。オーバーレイの新しい左上隅は、fancybox の左上隅があった場所に配置されます。

また、このシフトは単なる視覚的なものに見えますが、ボタンや入力フィールドなどの実際のコンテンツ要素は、本来あるべき場所と同じ場所にあり、「見えない」だけです。これは、次のボタンがあるはずの領域にカーソルを合わせたときに発生し、そのボタンの視覚的表現 (現在は遠くに配置されています) がホバー状態に切り替わりました。

あなたが私の言いたいことを理解しているかどうかわかりません。視覚的にはすべてのコンテンツが右に移動し、少し下に移動しましたが、マウス カーソルを見ると、本来あるべき場所にあることがわかります。そして、コンテンツが長すぎる場合にのみ、シフトが発生します。

ややこしい。

ファンシーボックスの呼び出しは次のとおりです。

$("a.various").fancybox({
    fitToView: false,
    autoSize: true,
    //width: 710,
    //height: 700,
    closeClick: false,
    autoCenter: false,
    scrolling: 'auto',
    helpers: {
        overlay: { closeClick: false }
    }

オーバーフロー スタイルは次のとおりです。

ContainerDiv: no overflow styles
MenuDiv: no overflow styles
ScrollableContentDiv: overflow-y: auto; overflow-x: hidden;
ActualContentDiv: overflow-x: visible; overflow-y: visible;

これをうまく説明する方法がわかりません。プロジェクトを表示することは許可されていません。誰でもこれで私を助けることができますか？

4

1 に答える 1

1

デモンストレーションは、問題を理解するのに役立ちます。再作成しようとしましたが、うまくいきました。次/前のアニメーションを無効にすると役立つかもしれません-

$("a.various").fancybox({
    nextEffect        : 'none',
    prevEffect        : 'none'
});

</p>

実際に見る - http://jsfiddle.net/qwHW7/

于 2012-10-29T08:19:15.037 に答える