复制代码代码如下:
<٪@ 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 处理的回调函数
*/
وظيفة EventHandler (otarget ، fnhandler) {
if (otarget.addeventListener) {
otarget.addeventListener ("Scroll" ، fnhandler ، false) ؛
} آخر إذا (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" ، "")
- div.style.width.replace ("px" ، "") ؛
if (div.scrollleft> = diswidth) {
divheader.style.overflowy = 'scroll' ؛
} آخر {
divheader.style.overflowy = 'Hidden' ؛
}
}
window.onload = دالة onStartLock () {
var odiv = document.getElementById ("divcontentId") ؛
EventHandler (ODIV ، Function () {
OO ("DivContentId" ، "divheaderid") ؛
}) ؛
} ؛
</script>
</head>
<body>
<div id = "div1all"
style = "الموضع: مطلق ؛ اليسار: 0px ؛ اليمين: 0px ؛ أعلى: 0px ؛ القاع: 0px">
<div id = "divheaderid"
style = "الهامش اليمين: Auto ؛ الهامش اليساري: Auto ؛ overflow: Hidden ؛">
<table cellspacing = "0"
Style = "collapse: الانهيار ؛ حجم الخط: 15 بكسل"
BorderColor = "#c1dad7" cellpadding = "0" bgColor = "#f5fffa"
العرض = "600px">
<tr style = "الخلفية: البحرية ؛ اللون: أبيض ؛ الارتفاع: 30 بكسل">
<h> رأس A </h>
<h> الرأس B </h>
<th> header c </h>
<th> header d </h>
<th> header e </th>
<th> header f </h>
</r>
</table>
</div>
<div id = "DivContentId"
style = "الموضع: مطلق ؛ اليسار: 0px ؛ أعلى: 30.5px ؛ القاع: 0px ؛ اليمين: 0px ؛ فائض: التمرير">
<table cellspacing = "0"
Style = "collapse: الانهيار ؛ حجم الخط: 15 بكسل"
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>
</r>
<tr>
<td> a </td>
<td> b </td>
<td> c </td>
<td> d </td>
<td> e </td>
<td> f </td>
</r>
<tr>
<td> a </td>
<td> b </td>
<td> c </td>
<td> d </td>
<td> e </td>
<td> f </td>
</r>
<tr>
<td> a </td>
<td> b </td>
<td> c </td>
<td> d </td>
<td> e </td>
<td> f </td>
</r>
<tr>
<td> a </td>
<td> b </td>
<td> c </td>
<td> d </td>
<td> e </td>
<td> f </td>
</r>
</table>
</div>
</div>
</body>
</html>