本文介绍了一种通过JavaScript实现的网页滚动同步技术，该技术可以使页面的不同部分（如左右两个区域）在滚动时保持同步，确保良好的用户体验。文章通过具体实例展示了如何设置滚动监听事件以及如何调整元素的位置。
<!--Page language="c#" Codebehind="WebForm2.aspx.cs" AutoEventWireup="false" Inherits="Budget.WebForm2"--><!--CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN-->
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" />
<meta content="C#" name="CODE_LANGUAGE" />
<meta content="JavaScript" name="vs_defaultClientScript" />
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema" /><script language="javascript">
function syncscroll(obj)
{
//debugger
y.innerHTML = obj.scrollTop;
x.innerHTML = obj.scrollLeft;
m.innerHTML = obj.scrollLeft;
n.innerHTML = obj.scrollTop;
//scroll1.children[0].style.position = "relative";
//scroll2.children[0].style.position = "relative";
//左下
scroll2.scrollTop = obj.scrollTop;
scroll2.children[0].style.top = "-"+obj.scrollTop;
//右上
scroll1.scrollLeft = obj.scrollLeft;
scroll1.children[0].style.left = "-"+obj.scrollLeft;
}
</script>
<form id="Form1" method="post" runat="server">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><!--*********左上-BEGIN***********-->
<table height="100%" cellspacing="1" cellpadding="0" width="240" bgcolor="#ff8000" border="0">
<colgroup><col width="80"></col><col width="80"></col><col width="80"></col></colgroup>
<tbody>
<tr bgcolor="#ffffff">
<td height="20"> <font face="宋体">1</font></td>
<td> <font face="宋体">2</font></td>
<td> <font face="宋体">3</font></td>
</tr>
</tbody>
</table>
<!--**************左上-END**********--></td>
<td>
<div id="scroll1" style="OVERFLOW: hidden; WIDTH: 450px" twffan="done"><!--***********右上-BEGIN********-->
<table style="WIDTH: 900px" height="100%" cellspacing="1" cellpadding="0" bgcolor="#ffcc99" border="0">
<colgroup><col width="150"></col><col width="150"></col><col width="150"></col><col width="150"></col><col width="150"></col></colgroup>
<tbody>
<tr bgcolor="#ffffff">
<td> <font face="宋体">4</font></td>
<td height="20"> <font face="宋体">5</font></td>
<td> <font face="宋体">6</font></td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<!--************右上-END**********--></div>
</td>
</tr>
<tr>
<td valign="top" align="left">
<div id="scroll2" style="OVERFLOW-Y: hidden; OVERFLOW-X: scroll; HEIGHT: 150px" twffan="done"><!--*************左下-BEGIN**************-->
<table height="100%" cellspacing="1" cellpadding="0" width="240" bgcolor="#99ccff" border="0">
<colgroup><col width="80"></col><col width="80"></col><col width="80"></col></colgroup>
<tbody>
<tr bgcolor="#ffffff">
<td height="20"> <font face="宋体">11</font></td>
<td> <font face="宋体">22</font></td>
<td> <font face="宋体">33</font></td>
</tr>
<tr bgcolor="#ffffff">
<td height="20"> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td height="20"> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td height="20"> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td height="20"> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td height="20"> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td height="20"> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td height="20"> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td height="20"> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td height="20"> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<!--*************左下-END***********--></div>
</td>
<td valign="top" align="left">
<div style="OVERFLOW: scroll; WIDTH: 450px; HEIGHT: 150px" onscroll="javascript:syncscroll(this)" twffan="done"><!--***********右下-BEGIN***********-->
<table style="WIDTH: 900px" height="100" cellspacing="1" cellpadding="0" bgcolor="#666666" border="0">
<colgroup><col width="150"></col><col width="150"></col><col width="150"></col><col width="150"></col><col width="150"></col></colgroup>
<tbody>
<tr bgcolor="#ffffff">
<td width="100" height="20"> <font face="宋体">333333333</font></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td height="20"> <font face="宋体">sdf</font></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td height="20"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td height="20"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td height="20"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td height="20"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td height="20"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td height="20"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td height="20"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#ffffff">
<td height="20"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<!--*************右下-END*****************--></div>
</td>
</tr>
</tbody>
</table>
<p id="y"> </p>
<p id="x"> </p>
<p id="m"> </p>
<p id="n"> </p>
</form>
WIDTH: expression(screen.width-654); HEIGHT: expression(screen.height-630)"
可以自动根据分辨率设置高宽度。
后来发现有的浏览器高，有的低，页面会显示不出来，需要修改成
WIDTH: expression(document.body.clientWidth-494)
才正常了。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
