复制代码代码如下:
< %@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"% >
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.***w3.org/TR/html4/loose.dtd" >
< html >
< head >
< title >< /title >
< script >
/**
* @param oTarget 需要加载scroll的dom对象
* @param fnHandler 处理的回调函数
*/
function eventHandler(oTarget, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener("scroll", fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("onscroll", fnHandler);
} else {
oTarget["onscroll"] = fnHandler;
}
};
function oo(divContentID, divHeaderID) {
var div = document.getElementById(divContentID);
var left = div.scrollLeft;
var divHeader = document.getElementById(divHeaderID);
divHeader.scrollLeft = left;
var disWidth = div.children[0].style.width.replace("px", "")
- div.style.width.replace("px", "");
if (div.scrollLeft >= disWidth) {
divHeader.style.overflowY = 'scroll';
} else {
divHeader.style.overflowY = 'hidden';
}
}
window.onload = function onStartLock() {
var oDiv = document.getElementById("divContentID");
eventHandler(oDiv, function() {
oo("divContentID", "divHeaderID");
});
};
< /script >
< /head >
< body >
< div id="div1All"
style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px" >
< div id="divHeaderID"
style="margin-right: auto; margin-left: auto; overflow: hidden;" >
< table cellspacing="0"
style="BORDER-COLLAPSE: collapse; font-size: 15px"
borderColor="#c1dad7" cellPadding="0" bgcolor="#f5fffa"
width="600px" >
< Tr style="background: navy; color: white; height: 30px" >
< Th >Header A< /Th >
< Th >Header B< /Th >
< Th >Header C< /Th >
< Th >Header D< /Th >
< Th >Header E< /Th >
< Th >Header F< /Th >
< /Tr >
< /table >
< /div >
< div id="divContentID"
style="position: absolute; left: 0px; top: 30.5px; bottom: 0px; right: 0px; overflow: scroll" >
< table cellspacing="0"
style="BORDER-COLLAPSE: collapse; font-size: 15px"
borderColor="#c1dad7" cellPadding="0" bgcolor="#f5fffa"
width="600px" >
< Tr >
< Td >A< /Td >
< Td >B< /Td >
< Td >C< /Td >
< Td >D< /Td >
< Td >E< /Td >
< Td >F< /Td >
< /Tr >
< Tr >
< Td >A< /Td >
< Td >B< /Td >
< Td >C< /Td >
< Td >D< /Td >
< Td >E< /Td >
< Td >F< /Td >
< /Tr >
< Tr >
< Td >A< /Td >
< Td >B< /Td >
< Td >C< /Td >
< Td >D< /Td >
< Td >E< /Td >
< Td >F< /Td >
< /Tr >
< Tr >
< Td >A< /Td >
< Td >B< /Td >
< Td >C< /Td >
< Td >D< /Td >
< Td >E< /Td >
< Td >F< /Td >
< /Tr >
< Tr >
< Td >A< /Td >
< Td >B< /Td >
< Td >C< /Td >
< Td >D< /Td >
< Td >E< /Td >
< Td >F< /Td >
< /Tr >
< /table >
< /div >
< /div >
< /body >
< /html >