<!DOCTYPE HTML>
<html>
<head>
<title>锁定行</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
主要原理是通过2个叠在一起的div实现,一个div的overflow:auto,通过此div滚动时的
scrollLeft值来设置另一个overflow:hidden的left属性从而达到锁定的效果
*/
$(document).ready(function(){
$("#divScroll").on("scroll",function(){
//当用于显示滚动条的div滚动时,设置滚动div内容的left为负值
$("#divYesScrollContent").css({'left':(-1)*$(this).scrollLeft()+'px'});
});
});
</script>
<style type="text/css">
/*用于包装效果的最外层div*/
#divTest
{
position:relative;
width:1000px;
border:1px solid black;
}
/*负责滚动的div在其内部有一个与主div宽度一致的div*/
#divScroll
{
position:relative;
left:0px;
top:0px;
overflow:auto;
width:100%;
height:100%;
z-index:1;
}
/*滚动div的子div*/
#divScrollChild
{
position:relative;
top:0px;
left:0px;
width:2000px;
height:50px;
}
/*主div使用absolute将其与滚动的div进行重叠,超出部分设置为隐藏*/
#divMain
{
position:absolute;
top:0px;
left:0px;
width:1000px;
height:50px;
overflow:hidden;
z-index:2;
}
/*主div里面的内容,这里为了方便使用了table也可以用2个div的float:left实现*/
#divMain table
{
position:relative;
top:0px;
left:0px;
width:2000px;
height:25px;
border-spacing:0px; /*边距间的距离为0*/
border-collapse:collapse;/*合并边框*/
}
#divMain table td
{
border:1px solid red;
}
/*固定部分div限制超出部分为隐藏*/
#divNoScroll
{
position:relative;
left:0px;
top:0px;
height:100%;
width:100%;
overflow:hidden;
}
/*固定部分的内容*/
#divNoScrollContent
{
position:relative;
left:0px;
top:0px;
width:100px;
background-color:white;
text-align:left;
}
/*滚动部分div限制超出部分为隐藏*/
#divYesScroll
{
position:relative;
left:0px;
top:0px;
height:100%;
width:100%;
overflow:hidden;
}
#divYesScrollContent
{
position:relative;
left:0px;
top:0px;
width:1900px;/*注意这里宽度为2000-100,因为固定部分已占用100了*/
background-color:white;
text-align:left;
}
</style>
</head>
<body>
<div id="divTest">
<div id="divScroll">
<div id="divScrollChild">
</div>
</div>
<div id="divMain">
<table>
<tr>
<td>
<div id="divNoScroll">
<div id="divNoScrollContent">
不动列行
</div>
</div>
</td>
<td>
<div id="divYesScroll">
<div id="divYesScrollContent">
我是滚动列
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
jquery+css实现锁定列
最新推荐文章于 2023-02-17 14:52:16 发布