列表左边左右固定，右边可以左右滚动，且左右两边列表滚动时上下联动

最新推荐文章于 2023-08-13 09:34:53 发布

weixin_30293079

最新推荐文章于 2023-08-13 09:34:53 发布

阅读量1.2k

点赞数

文章标签： javascript 前端 python ViewUI

原文链接：http://www.cnblogs.com/wuchaofan1993/p/5993900.html

版权

function funcsrcoll1()
{
rightdiv.scrollTop = leftdiv.scrollTop;//设置左边的div和右边div上下滚动距离相同，即左右上下滚动联动。
}
function funcsrcoll2()
{
leftdiv.scrollTop = rightdiv.scrollTop;//设置左边的div和右边div上下滚动距离相同，即左右上下滚动联动。
Divtop.scrollLeft = rightdiv.scrollLeft;//设置左边的div和右边div左右滚动距离相同，即左右滚动联动。
}
function funcsrcoll3()
{
rightdiv.scrollLeft =Divtop.scrollLeft;//设置左边的div和右边div左右滚动距离相同，即左右滚动联动。
}

<body style="scroll: no">
<form method="post" id="form1" name="form1">
<div style="width: 200px; height: 443px; float: left; overflow: hidden;">
<div id="leftdiv" style="width: 220px; height: 423px; overflow-y: auto; overflow-x: hidden;"
onscroll="funcsrcoll1()">
<div id="divMenu" style="position: fixed; margin-top: 0px; width: 200px; height: 423px;">
<table cellpadding="0" cellspacing="1" width="100%" border="0" class="Table_List">
<tr class="ListTableHeader">
<td width="110px" nowrap="nowrap" align="center">
部门
</td>
<td width="90px" nowrap="nowrap" align="center">
下属部门
</td>
</tr>
</table>
</div>
<table cellpadding="0" cellspacing="1" width="100%" border="0" class="Table_List">
</table>
</div>
</div>
<div id="menudiv" style="width: 80%; height: 23px;margin-left:100px; margin-top: 0px; overflow: hidden;">
<div id="Divtop" style="width: 100%; height: 43px; overflow-x: auto; overflow-y: hidden;"
onscroll="funcsrcoll3()">
<script type="text/javascript">
window.onload = function() {
var width = $("#menudiv").width();
$("#menudiv").width(width - 20);
$("#Divtop").width(width);
}
</script>
<div id="divMain" style="margin-left:0px; width: 100%; height: 100%;" >
<table cellpadding="0" cellspacing="1" width="150%" border="0" class="Table_List">
<tr class="ListTableHeader">
<td width="10%" nowrap="nowrap" align="center">
有效
</td>
<td width="10%" nowrap="nowrap" align="center">
暂缓
</td>
<td width="10%" nowrap="nowrap" align="center">
未知
</td>
<td width="8%" nowrap="nowrap" align="center">
我租
</td>
<td width="8%" nowrap="nowrap" align="center">
他租
</td>
<td width="8%" nowrap="nowrap" align="center">
我售
</td>
<td width="8%" nowrap="nowrap" align="center">
他售
</td>
<td width="8%" nowrap="nowrap" align="center">
撤单
</td>
<td width="8%" nowrap="nowrap" align="center">
电话错误
</td>
<td width="8%" nowrap="nowrap" align="center">
待确认
</td>
<td width="10%" nowrap="nowrap" align="center">
已驳回
</td>
</tr>
</table>
</div>
</div>
</div>
<div id="rightdiv" style="width: 80%; height: 420px; float: left; overflow: scroll"
onscroll="funcsrcoll2()">
<div id="divinner" style="float:left; width: 100%;">
<script type="text/javascript">
window.onload = function() {
var width = $("#menudiv").width();
$("#rightdiv").width(width + 20);
$("#divinner").width(width);
}
</script>
<table cellpadding="0" cellspacing="1" width="150%" border="0" class="Table_List">
</table>
</div>
</div>
</form>
</body>
</html>

转载于:https://www.cnblogs.com/wuchaofan1993/p/5993900.html

weixin_30293079

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
列表左边左右固定，右边可以左右滚动，且左右两边列表滚动时上下联动

function funcsrcoll1(){rightdiv.scrollTop = leftdiv.scrollTop;//设置左边的div和右边div上下滚动距离相同，即左右上下滚动联动。}function funcsrcoll2(){leftdiv.scrollTop = rightdiv.scrollTop;//设置左边的div和右边div上下滚动距...
复制链接

扫一扫