web-dev-qa-db-ja.com

jQuery-Fancybox：しかし、スクロールバーは必要ありません！

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

フォームが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>

私が間違っていることはあるに違いありませんが、それが何であるかを理解することはできません。ここでお役に立てば幸いです。ありがとう。

jqueryfancybox
25
fmz

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

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

編集：サンプルサイトを表示しました。コンテンツに設定されている幅の幅が、fancybox自体よりも大きいようです。

14
dale

私はfancyboxとiframeで同じ問題を抱えていましたが、解決策を探してここに行きました。オーバーフロー：隠しは機能しませんでしたが、fancyboxを使用するとiframeスクロールのオプションを設定できることがわかりました（iframeで "scrolling = no"属性を設定するのと同等）。優雅なマナー：

$.fancybox({
    'type'        : 'iframe',
    'scrolling'   : 'no',
... and the rest of the parameters.
51
ylebre

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

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

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

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

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

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

helpers : {
  overlay : {
    css : { 'overflow' : 'hidden' }
  }
}
10
Benjamin

上記のすべてのヒントをテストした後（およびいくつかのインラインoverflow: scroll at .fancybox-inner）また、他の多くの回避策を試してみましたが、このソリューションでスクロールバーを取り除きました：

    afterShow: function(){
        this.inner.css({
            overflow: 'auto' // or 'no'
        });
    }
9
larsbo

私は同じ問題に直面しており、試行錯誤の後、フレーム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'  
    }); 
});

注：これを有効にするには、fancyboxボックスタイプをiframeにする必要があります。

7
reyBorn

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

設定しなければならなかった問題を回避するために

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

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

6
user1157749

たとえば、iframeオプションを独自のコンテキストに配置する必要があります。

$(".someclass").fancybox({
    type : 'iframe',
    iframe : {
        scrolling : 'no'
    }
});
4
JRT

これに対する解決策は、

'autoDimensions' : false

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

3
NightFalL

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

問題は実際には非常に単純です。理由は、ボディタグmarginがデフォルトで8px（ブラウザに応じて）に設定され、0に設定しただけでスクロールバーが修正されるためです。

私が持っているjs構成は次のとおりであり、fancyboxのCSSを変更せずにうまく機能します。

$(".iframe").fancybox({
    'autoScale'         : false,
    'autoDimensions'    : false,
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'type'              : 'iframe'
});
3
Scott Hugh

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

例

$.fancybox({
href: 'yourUrl.html',
width: 800,
height: 415,
autoSize: false,
type : 'iframe',
iframe: {
scrolling : 'no',
preload   : true
}});
2
lavb

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

iframe : {

    scrolling : 'no', // i changed this from 'auto' to 'no'
    preload   : true
},
1
leah dlc

Fancyboxバージョン：2.1.5を使用して、ここで提案するさまざまなオプションをすべて試してみましたが、スクロールバーが表示されたままでした。

$('.foo').click(function(e){            
    $.fancybox({
        href: $(this).data('href'),
        type: 'iframe',
        scrolling: 'no',
        iframe : {
            scrolling : 'no'
        }
    });
    e.preventDefault();
});

そのため、これが見つかるまでコードのデバッグを行ったため、設定したすべてのオプションが上書きされ、多くのオプションを使用してこれを上書きすることはできません。

if (type === 'iframe' && isTouch) {
   coming.scrolling = 'scroll';
}

最終的には、ソリューションはCSS！importantハックを使用することでした。

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

担当するコード行は次のとおりです。

current.inner.css('overflow', scrolling === 'yes' ? 'scroll' : (scrolling === 'no' ? 'hidden' : scrolling));

Fancyboxは以前は信頼できる実用的なソリューションでしたが、今では一貫性のなさを見つけています。開発者ライセンスを購入した後でも、実際にダウングレードについて議論しています。商用プロジェクトに必要なことに気づかなかった場合の詳細情報： https://stackoverflow.com/a/8837258/560287

1
John Magnolia

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

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

これはIEとGoogle Chromeの両方で機能した唯一のものです。これは主に.body.scrollHeightが原因で、IE =最高です。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);
    });
  }
});
1
guideX

Fancybox 2.xには、少なくとも「オーバーレイヘルパー」があり、それが私にとっての鍵となりました。 fancybox構成パラメーターに次を追加しました。

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

CSSでこれを設定しようとしましたが、それは機能せず、ゲームの後半（beforeShowイベントなど）でしたが、ちらつきが発生しました。これは問題なく機能するようです。

1
Magnus

私は同じ問題を推測しました。 fancyboxのプロパティやCSSが何であるかではなく、私のサイトの主要なCSSです。

あなたが何かを持っている場合

div {overflow:auto;height:auto;}

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

1
Mark David Allen
$(".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'
});
1
ifail

ここでの回答は、この問題を潜在的に解決する多くの方法を提供しますが、ほとんどはタッチスクリーンを備えたデバイスでは機能しません。問題の原因は、ソースの次のコード行にあると思います。

if (type === 'iframe' && isTouch) {
    coming.scrolling = 'scroll';
}

これは、fancyboxの初期構成で設定されたオプションをオーバーライドするようであり、これらのコード行が実行された後にのみ変更できます。つまり、afterShowメソッドを使用してcssを変更します。ただし、このようなメソッドはすべて、顕著な遅延/遅延を引き起こし、スクロールバーを開くと消えるのを見ることができます。

私の提案する修正は、タッチスクリーンを備えたデバイスにスクロールバーを強制する理由が見当たらないため、880行目あたりのメインソースファイルjquery.fancybox.jsからこれらの行を削除することです。

これにより、スクロールバーがすぐに消えるわけではなく、単にscrolling構成オプションのオーバーライドが停止されることに注意してください。したがって、scrolling: 'no'をfancyboxの初期構成に追加する必要もあります。

0
Varun Munjeti

私の2セント、書き込み

*{ margin:0; padding:0; }

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

0
Rosalba Palacios

オーバーフロー（スクロールバー）を取り除くためにこれを行いました...

jquery.fancybox .... jsファイルの終わりまでに、onStart、onCancel、onCompleteなどの関数があり、それらはすべて空です...したがって、先に進み、「$（ '」でonStartの中括弧に入力します。 body '）。css（' overflow '、' hidden '） "およびonClosed" $（' body '）。css（' overflow '、' visible '） "...このように見えるはずです...

onStart:function(){$('body').css('overflow','hidden')},
onClosed:function(){$('body').css('overflow','visible')},

平和

0
C.Gordon

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

html {  overflow-y: scroll; }

メインのCSSで、スクロールバーを必要とするまたは必要としないページ間で中央コンテンツがうまくジャンプしないようにします。これに気付くまで、上記のすべてをポップアップのスクロールバーを削除しようとしました。ポップアップでのみ無効にすると、ポップアップのスクロールバーも消えました。そのため、表示されているスクロールバーが実際にはiframeから来ており、内部のページから来ていないことを確認してください。

0
cdonner

行を編集197および198 of jquery.fancybox.css：

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: auto;
}
0
Alan PS