我遇到了一个问题,需要在行标题(小时)和列标题(天)的计划中保持可见性。
应用程序在IFrame中显示内容,因此我创建了一个水平DIV和一个垂直DIV,在IFrame外部使用样式“overflow:hidden”。
然后,我使用IFrame的“onscroll”事件同步滚动。
以下是我的代码以使标题与滚动同步:
window.onscroll = function () {
try {
var offsetX = (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft;
var header1Div = window.parent.document.getElementById("EntetesColonnes");
header1Div.scrollLeft = offsetX;
var offsetY = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
var header2Div = window.parent.document.getElementById("HeaderHoursLeft");
header2Div.scrollTop = offsetY;
}
catch (ex) {
alert("FrmPlanningChirurgien/window.onscroll: " + ex.message);
}
}
我的解决方案并不简单,因为我必须在“onresize”中设置水平DIV的宽度和垂直DIV的高度。
然后这就引起了更多的复杂性,因为onResize可能会每秒钟触发很多次,并且当滚动发生时,甚至在IE8中也会触发此事件。
因此,我使用了setTimeout来防止标题过于频繁地重新绘制:
var PREVIOUS_frameWidth = 0;
var PREVIOUS_frameHeight = 0;
var timerMakeHeaders = null;
window.onresize = function () {
try {
var frameWidth = CROSS.getWindowWidth();
var frameHeight = CROSS.getWindowHeight();
if (frameWidth != PREVIOUS_frameWidth || frameHeight != PREVIOUS_frameHeight) {
if (timerMakeHeaders != null) {
window.clearTimeout(timerMakeHeaders);
timerMakeHeaders = null;
}
timerMakeHeaders = window.setTimeout(makeHeaders, 50);
PREVIOUS_frameWidth = frameWidth;
PREVIOUS_frameHeight = frameHeight;
}
} catch (e) { alert("Erreur window.onresize/FrmPlanningChirurgien.aspx : " + e.message); }
}
最后,
makeHeaders()
方法必须调整 DIV 的大小。
function makeHeaders() {
var frame = window.parent.document.getElementById("CalendarFrame");
var iframeRect = frame.getBoundingClientRect();
headerDiv.style.width = iframeRect.right - iframeRect.left - 20;
headerDiv.scrollLeft = frame.scrollLeft;
var headerHourDiv = window.parent.document.getElementById("HeaderHoursLeft");
var newHeight = iframeRect.bottom - iframeRect.top - 20 - 7;
headerHourDiv.style.height = newHeight;
headerHourDiv.scrollTop = frame.scrollTop;
}
catch (e) {
alert("makeHeaders: " + e.message);
} }
也许可以不使用IFRAME,仅使用3个DIV:一个用于每个标题,最后一个用于内容。但我认为机制必须相同:需要在滚动位置之间进行同步。
此致敬礼,