jquery+css实现锁定列

最新推荐文章于 2023-02-17 14:52:16 发布

BeautyMyth

最新推荐文章于 2023-02-17 14:52:16 发布

阅读量454

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/cjsyr_cjsyr/article/details/38757937

版权

Jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>

BeautyMyth

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery+css实现锁定列

锁定行 /* 主要原理是通过2个叠在一起的div实现，一个div的overflow:auto，通过此div滚动时的 scrollLeft值来设置另一个overflow:hidden的left属性从而达到锁定的效果 */ $(document).ready(function(){ $("#divScroll").on("scroll",function(){ //
复制链接

扫一扫

专栏目录