26

ここでポップアップ登録フォームにjQuery Fancyboxを使用しています

フォームを 450px x 700px のサイズで表示したいのですが、高さと幅を何に設定してもスクロールバーが表示されます。

<script type="text/javascript">
    $(document).ready(function() {
        $("a#regForm").fancybox({
            'titleShow'  : false,
            'autoscale' : true,
            'width'  : '450',
            'height'  : '700',
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic'
            }); 
        });
    </script>

私が間違っていることがあるはずですが、それが何であるかわかりません。ここで手を貸していただければ幸いです。ありがとう。

4

24 に答える 24

51

私はfancyboxとiframeで同じ問題を抱えていましたが、解決策を探してここにたどり着きました。オーバーフロー: hidden は機能しませんでしたが、fancybox を使用すると iframe スクロールのオプションを設定できることがわかりました (iframe で "scrolling=no" 属性を設定するのと同じです)。優雅な方法:

$.fancybox({
    'type'        : 'iframe',
    'scrolling'   : 'no',
... and the rest of the parameters.
于 2010-11-04T21:16:45.533 に答える
14

少し奇妙に聞こえます。醜い解決策は、css、overflow:hidden; を使用することです。

ファンシーボックスを使用すると、スクロールバーが正しく機能します。ファンシーボックスのコンテンツが別の高さを設定していないことを確認してください。

編集：サンプルサイトを表示しました。ファンシーボックス自体よりも大きい幅がコンテンツに設定されているようです。

于 2010-02-15T19:17:52.497 に答える
11

私はこれにかなり苦労しましたが、Fancybox のドキュメント内で答えを見つけるだけでした。

上で示唆したように、最初はスクロールを無効にするのと同じくらい簡単だと思いました。

$('.fancybox').fancybox({'type': 'iframe', 'scrolling': 'no', 'width': 500})

ただし、「スクロール」オプションを「いいえ」に設定するだけでは十分ではありません。次のように、「iframe」オプションで同じことを繰り返す必要がありました。

$('.fancybox').fancybox({
  'type': 'iframe', 
  'scrolling': 'no', 
  'width': 500, 
  'iframe': {'scrolling': 'no'}
})
于 2013-08-09T10:38:12.593 に答える
10

上記のマグナスの答えが私のためにそれをしたと言いたかっただけですが、「オーバーフロー」する必要がある2番目の「オーバーレイ」については

helpers : {
  overlay : {
    css : { 'overflow' : 'hidden' }
  }
}
于 2012-11-16T20:41:53.097 に答える
9

overflow: scroll上記のすべてのヒントをテストした後 (そして、いくつかの inline atによって引き起こされた役に立たないスクロールバーがまだあります.fancybox-inner)、また他の多くの独自の回避策を試した後、私はこの解決策でスクロールバーを取り除きました:

    afterShow: function(){
        this.inner.css({
            overflow: 'auto' // or 'no'
        });
    }
于 2013-05-21T14:33:51.397 に答える
7

私も同じ問題に直面しており、試行錯誤の末、フレームcssクラスをオーバーライドすることでスクロールバーを回避できることがわかりました。

あなたはこのようにすることができます：

iframe.fancybox-iframe {
    overflow:hidden;
}

JS構成：

jQuery(document).ready(function(){
    $("a.various").fancybox({
        'width'             : 'auto',
        'height'            : 'auto',
        'autoScale'         : false,
        'autoDimensions'    : false,
        'scrolling'         : 'no',
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'iframe'  
    }); 
});

注：これを有効にするには、ファンシーボックスボックスのタイプがである必要がありますiframe。

于 2012-09-23T01:17:23.253 に答える
6

FancyboxオプションでmaxWidthを設定すると、垂直スクロールバーが表示されるという同様の問題が発生しました。

問題を回避するために私は設定しなければなりませんでした

.fancybox-inner {
   overflow: hidden !important;
}

FancyboxオプションでmaxWidthを指定するのではなく、Fancyboxコンテンツに固定幅のCSSルールを設定します。後者を実行した場合、コンテンツのFancyboxの計算された高さはわずかに小さすぎました。おそらく、そもそもスクロールバーを配置していた理由を示唆しています。

于 2012-10-09T01:43:27.453 に答える
4

iframe オプションを独自のコンテキストに配置する必要があります。例:

$(".someclass").fancybox({
    type : 'iframe',
    iframe : {
        scrolling : 'no'
    }
});
于 2013-10-03T16:09:29.490 に答える
3

これに対する解決策は設定することだと思います

'autoDimensions' : false

その場合、インラインコンテンツの幅と高さは、設定したとおりになります。

于 2012-04-11T03:08:01.037 に答える
3

少し奇妙に聞こえるかもしれませんがmargin、フォーム ページの body タグの を 0 に設定しようとした人はいますか。

問題は実際には非常に単純です。その理由は、marginデフォルトでbody タグが8px(ブラウザによって異なります) に設定されており、それを 0 に設定すると、スクロールバーが修正されるためです。

私が持っているjs構成は次のとおりで、fancyboxのcssを変更しなくてもうまく機能します。

$(".iframe").fancybox({
    'autoScale'         : false,
    'autoDimensions'    : false,
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'type'              : 'iframe'
});
于 2012-12-04T12:12:44.230 に答える
2

オプションとして iframe: { scrolling : 'no' } を追加

例

$.fancybox({
href: 'yourUrl.html',
width: 800,
height: 415,
autoSize: false,
type : 'iframe',
iframe: {
scrolling : 'no',
preload   : true
}});
于 2013-08-28T14:43:24.123 に答える
1

高さと幅の値を囲む引用符を削除します。

<script type="text/javascript">
    $(document).ready(function() {
        $("a#regForm").fancybox({
            'titleShow'  : false,
            'autoscale' : true,
            'width'  : 450,
            'height'  : 700,
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic'
            }); 
        });
    </script>
于 2010-10-25T14:25:53.463 に答える
1

jquery.fancybox.js で、この部分を編集しました。

iframe : {

    scrolling : 'no', // i changed this from 'auto' to 'no'
    preload   : true
},
于 2012-12-06T15:57:45.407 に答える
1 
$(".various").fancybox({
    fitToView   : false,
    width       : '100%',
    height      : '100%',
    maxWidth    : 850,
    maxHeight   : 550,    
    fitToView   : false,
    padding : 20,
    autoSize    : true,
    closeClick  : true,
    openEffect  : 'none',
    closeEffect : 'none',
    overflow : 'hidden', 

            scrolling   : 'no'
});
于 2012-12-17T02:52:00.003 に答える
1

Fancybox 2.x には少なくとも「オーバーレイ ヘルパー」があり、これが私にとって重要であることが判明しました。ファンシーボックスの構成パラメーターに以下を追加しました。

helpers : {
  overlay : {
    css : { 'overlay' : 'hidden' }
  }
}

CSS でこれを設定しようとしましたが、うまくいきませんでした。ゲームの後半、beforeShow イベントなどで、バーがちらつきました。これは問題なく動作するようです。

于 2012-11-08T14:44:04.223 に答える
1

これは、IE と Google Chrome の両方で機能した唯一のことです。IE で最もよく機能する .body.scrollHeight が原因だと思います。Firefox用に+30を入れました...

jQuery.fancybox({
  href: href,
  type: "iframe",
  centerOnScroll: 'true',
  scrolling: 'no',
  width: 650,
  'onComplete': function() {
    jQuery('#fancybox-frame').load(function() {
      jQuery('#fancybox-content').height(this.contentWindow.document.body.scrollHeight + 30);
    });
  }
});
于 2013-04-02T20:37:00.737 に答える
1

私は同じ問題を推測していました。それはファンシーボックスのプロパティや CSS ではなく、私のサイトのメインの CSS でした。

次のようなものがある場合

div {overflow:auto;height:auto;}

サイト css の継承可能/ルートの場合、ファンシー ボックスでスクロール バーの問題が発生します。ID とクラスを使用して HTML と CSS を削除し、より正確にします

于 2010-10-28T17:29:38.243 に答える
0

私の2セント、書いて

*{ margin:0; padding:0; }

ターゲット ページのメイン css で、すべての要素の高さのサイズのコンテンツ div を追加します。.js、listo、saludos には触れないでください。

于 2013-05-30T00:06:11.427 に答える
0

197行と198の編集jquery.fancybox.css:

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: auto;
}
于 2014-09-27T19:35:20.790 に答える
0

ここに別の考えがあります。私が持っていた

html {  overflow-y: scroll; }

私のメインCSSで、中央に配置されたコンテンツが、スクロールバーを必要とする、または必要としないページ間を飛び回るのを防ぎます。これに気付くまで、ポップアップのスクロールバーを取り除くために上記のすべてを試しました。ポップアップのみをオフにすると、ポップアップのスクロールバーも消えました。そのため、表示されているスクロール バーが実際に iframe からのものであり、ページ内からのものではないことを確認してください。

于 2013-04-12T13:22:58.793 に答える
-2

別の方法は、オーバーフローを変更することです:

body {
    overflow: hidden;
}

あなたのiframeのHTMLで。

于 2015-05-24T13:45:16.280 に答える