ご提供いただけるご支援をいただければ幸いです。以下は、残業代の未払いにつながっています。
ブラウザ ビューポートのフル サイズである iframe の上に div をオーバーレイしようとしていますが、スクロールすると、このオーバーレイされた div が下の iframe コンテンツと共に移動します。また、iframeがビューポートより大きい場合に表示されるスクロールバーのセットが1つだけになるようにしています。
サポートされる主要なブラウザは OSX 上の Safari ですが、他のクロスプラットフォーム ブラウザによるソリューションのサポートがある場合は、非常に高く評価されます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%;">
<head>
<title>Prototype dashboard overlay selector</title>
<script type="text/javascript">
function GotoDashboard (sel) {
var url = sel[sel.selectedIndex].value;
window.location = url;
}
</script>
</head>
<body style="height:100%; margin:0px; padding:0px; background-color:white; overflow:auto;">
<div scrolling="auto" style="width:100%; height:100%; margin:0px; padding:0px;">
<div scrolling="auto" style="position:relative; display:block; width:100%; margin:0px; padding:0px; overflow:scroll;">
<form name="foo" style="position:absolute; z-index:999; border:0px; margin:0px; padding:0px; top:10px; right:200px;">
<select name="dashboardselector" onchange="GotoDashboard(this);" style="margin:0px; padding:0px; border:1px; background-color:red; font-color:white;">
<option value="">Select Dashboard</option>
<option value="http://www.google.co.uk">Foo</option>
<option value="http://www.amazon.co.uk">Bar</option>
</select>
</form>
<iframe src="http://www.bbc.co.uk" frameborder="0" width="100%" height="100%" scrolling="no" style="display:inline; overflow:visible; z-index:-1; margin:0px; padding:0px; width:100%; border:0px;">
</iframe>
<div>
</div>
</body>
</html>