Table 锁定列,锁定行

本文介绍了一种通过JavaScript实现的网页滚动同步技术,该技术可以使页面的不同部分(如左右两个区域)在滚动时保持同步,确保良好的用户体验。文章通过具体实例展示了如何设置滚动监听事件以及如何调整元素的位置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!--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">&nbsp;<font face="宋体">1</font></td>
                            <td>&nbsp;<font face="宋体">2</font></td>
                            <td>&nbsp;<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>&nbsp;<font face="宋体">4</font></td>
                            <td height="20">&nbsp;<font face="宋体">5</font></td>
                            <td>&nbsp;<font face="宋体">6</font></td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</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">&nbsp;<font face="宋体">11</font></td>
                            <td>&nbsp;<font face="宋体">22</font></td>
                            <td>&nbsp;<font face="宋体">33</font></td>
                        </tr>
                        <tr bgcolor="#ffffff">
                            <td height="20">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr bgcolor="#ffffff">
                            <td height="20">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr bgcolor="#ffffff">
                            <td height="20">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr bgcolor="#ffffff">
                            <td height="20">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr bgcolor="#ffffff">
                            <td height="20">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr bgcolor="#ffffff">
                            <td height="20">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr bgcolor="#ffffff">
                            <td height="20">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr bgcolor="#ffffff">
                            <td height="20">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr bgcolor="#ffffff">
                            <td height="20">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</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">&nbsp;<font face="宋体">333333333</font></td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr bgcolor="#ffffff">
                            <td height="20">&nbsp;<font face="宋体">sdf</font></td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr bgcolor="#ffffff">
                            <td height="20">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr bgcolor="#ffffff">
                            <td height="20">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr bgcolor="#ffffff">
                            <td height="20">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr bgcolor="#ffffff">
                            <td height="20">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr bgcolor="#ffffff">
                            <td height="20">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr bgcolor="#ffffff">
                            <td height="20">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr bgcolor="#ffffff">
                            <td height="20">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr bgcolor="#ffffff">
                            <td height="20">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
                <!--*************右下-END*****************--></div>
                </td>
            </tr>
        </tbody>
    </table>
    <p id="y">&nbsp;</p>
    <p id="x">&nbsp;</p>
    <p id="m">&nbsp;</p>
    <p id="n">&nbsp;</p>
</form>

WIDTH:  expression(screen.width-654); HEIGHT: expression(screen.height-630)"

可以自动根据分辨率设置高宽度。

 

 后来发现有的浏览器高,有的低,页面会显示不出来,需要修改成

WIDTH: expression(document.body.clientWidth-494)

才正常了。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晚上吃酱牛肉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值