复制代码代码如下 :
<%@ 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>
<헤드>
<제목> </title>
<cript>
/**
* @param otarget 需要加载 스크롤 的 dom 对象
* @param fnhandler 处理的回调函数
*/
기능 이벤트 핸들러 (Otarget, fnhandler) {
if (otarget.addeventListener) {
otarget.addeventListener ( "스크롤", fnhandler, false);
} else if (otarget.attachevent) {
otarget.attachevent ( "onscroll", fnhandler);
} 또 다른 {
otarget [ "onscroll"] = fnhandler;
}
};
함수 oo (divcontentid, divheaderid) {
var div = document.getElementById (divcontentId);
var left = div.scrollleft;
var divheader = document.getElementById (divheaderid);
divheader.scrollleft = 왼쪽;
var diswidth = div.children [0] .style.width.replace ( "px", "")
-iv.style.width.replace ( "px", "");
if (div.scrollleft> = diswidth) {
divheader.style.overflowy = 'scroll';
} 또 다른 {
divheader.style.overflowy = 'Hidden';
}
}
window.onload = function onstartLock () {
var odiv = document.getElementById ( "divcontentId");
EventHandler (Odiv, function () {
oo ( "divcontentid", "divheaderid");
});
};
</스크립트>
</head>
<body>
<div id = "div1all"
스타일 = "위치 : 절대; 왼쪽 : 0px; 오른쪽 : 0px; 상단 : 0px; 하단 : 0px">
<div id = "divheaderid"
스타일 = "마진 오른쪽 : 자동; 마진-왼쪽 : 자동; 오버플로 : 숨겨진;">
<TABLE CellSpacing = "0"
스타일 = "Border-Collapse : 붕괴; 글꼴 크기 : 15px"
bordercolor = "#c1dad7"cellpadding = "0"bgcolor = "#f5fffa"
너비 = "600px">
<tr style = "배경 : 해군; 색상 : 흰색; 높이 : 30px">
<th> 헤더 a </th>
<th> 헤더 b </th>
<th> 헤더 C </th>
<th> 헤더 d </th>
<th> 헤더 e </th>
<th> 헤더 f </th>
</tr>
</테이블>
</div>
<div id = "divcontentid"
스타일 = "위치 : 절대; 왼쪽 : 0px; 상단 : 30.5px; 하단 : 0px; 오른쪽 : 0px; 오버플로 : 스크롤">
<TABLE CellSpacing = "0"
스타일 = "Border-Collapse : 붕괴; 글꼴 크기 : 15px"
bordercolor = "#c1dad7"cellpadding = "0"bgcolor = "#f5fffa"
너비 = "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>
</테이블>
</div>
</div>
</body>
</html>