1
非常に単純なHTMLページにIframeを含むjQuery UIダイアログを起動しようとしています。ページはスクロールバーを必要としません。 IE9ではスクロールバーは表示されませんが、FF5では垂直スクロールバーが表示されます。FF5でjQuery UIダイアログに不要な垂直スクロールバーがあります
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
<style type="text/css">
iframe {width:100%; height:100%; border:0;}
</style>
</head>
<body>
<a href="" onclick="return showDialog()">Show the Dialog</a>
<div id="dlg"></div>
<script type="text/javascript">
$("#dlg").dialog({ autoOpen: false, modal: true, width:400, height:300, resizable:false, title: "YO"});
function showDialog()
{
$("#dlg").html('<iframe src="frame.htm" />').dialog("open");
return false;
}
</script>
</body>
</html>
そして、ここでのIFrameが表示されるという単純なframe.htmページです：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {margin:0; padding:0;}
body { background:#EFF;}
</style>
</head>
<body>
<div>
<p>I'm a paragraph</p>
<div style="height:2px; background:#000;"></div>
</div>
</body>
</html>
は？ここでダイアログを起動するページですか
これまでのところ私が行うことができました最高のは、このようにjQuery UI CSSを変更することによって完全に無効にスクロールです：
.ui-dialog .ui-dialog-content { overflow: hidden; }
しかし、私はオーバーフローを使用できるようにしたいと思います。ifのための自動コンテンツは実際にスクロールバーを保証します。 ありがとうございました。
興味深いことに動作しないのiframeに起因すると思わために働くありません。スクロールバーがiframeまたはそのコンテンツにあるかどうかは不明です。いずれにしてもiframeの内容にはスクロールバーが必要ですが、スクロールバーがない場合はスクロールバーがありません。 –
'$（element）[0] .scrollHeight'は、コンテンツの実際の高さを取得します。それがビューポートよりも大きいかどうかをチェックすると、必要に応じてスクロールバーを有効または無効にすることができます – Semyazas
その場合、完全なページを表示しているので、iFrameもビューポートとして検討していました。まだ存在しているスクロールバーについては、私はそれを再現しようとしています – Semyazas