http://www.mayakaimal.com/media-pressGoogle ChromeでFancyboxがスクロールしない
これはテストした他のすべてのブラウザで機能します。
<script type="text/javascript">
$j = jQuery.noConflict();
$j(function(){
$j("a.fancybox").fancybox({
maxWidth : '100%',
maxHeight : '100%',
fitToView : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
指定fancybox高さが一定値以上である場合には、fancyboxはスクロールしません。なぜそうなのかわからない。
私の場合、以下のコードが機能しました。それを再生して、あなたのケースを修正できるかどうかを確認してください。
height: Math.min(600, $(window).height() - 96)
$.fancybox({
width: 800,
height: Math.min(600, $(window).height() - 96),
autoScale: false,
padding: 8,
href: url,
scrolling: 'auto',
hideOnOverlayClick: false,
centerOnScroll: true,
transitionIn: 'elastic',
transitionOut: 'elastic',
type: 'iframe'
});
これは動作するはずです：
$.fancybox({
"href": "putYourURLhere",
"width": 500,
"height": 500,
"autoSize": false,
"autoDimensions": false,
"scrolling": 'auto',
"centerOnScroll": true,
"transitionIn": 'elastic',
"transitionOut": 'elastic',
"type": 'iframe',
"onClosed": function() {
parent.location.reload(true);
}
});
単にクロムでずれfancyboxを検査し、インスペクタウインドウが問題を修正閉じます。単にページをリフレッシュすると、以前に正しく配置されていなかったボックスが正しく開くようになります。コードを "var $ j = jQuery.noConflict（）;"にするべきではありません。しかし、私はそれがどのように問題を解決するのか見ていない。 –
FancyboxはChromeで使用すると、読み込まれた後にコンテンツのサイズが適切に変更されないようです。 Chromeでは、コンテンツが読み込まれる前にボックスのサイズが計算されているように見えます。したがって、ボックスの配置はオフです。回避策としてはいくつかのオプションがあります...コンテンツがポップアップボックスに読み込まれた後に$ .fancybox.resizeを呼び出すか、またはcenterOnScrollをtrueに設定するとChromeの問題が解決される可能性があります。 –
Firefoxで問題を再現しました...間違いなくイベントの順番です... fancyboxは、コンテンツがボックスに読み込まれる前にボックスのサイズを計算します。 –