jquery+css实现锁定列

来源：互联网发布：js图片点击弹出放大编辑：程序博客网时间：2024/05/17 23:20
<!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>
0 0