div滚动条联动「建议收藏」

全栈程序员站长

发布于 2022-09-14 15:29:02

1.3K0

发布于 2022-09-14 15:29:02

大家好，又见面了，我是你们的朋友全栈君。

应用场景：一般是表头和表体，或者是需要联动的div，滚动一个div的滚动条，让另一个div的滚动条也随之滚动到一样的位置

//表头
<div id="sc-table-head-div" class="sc-table-head-div" style="position:absolute;">
				    <table id="conitor_head" style="table-layout:fixed;width:100%" cellpadding=0 cellspacing=0>
					<colgroup>
						<col style="width:24px;text-align:center"/>
						<col style="width:24px;text-align:center"/>
					</colgroup>
					<tr>
						<td>序<br/>号</td>
						<td style="height:40px">姓名</td>
					</tr>
				</table>
</div>

//表体
<div id='sc-table-body-div' headid='sc-table-head-div' class='sc-table-body-div' onscroll='scroll(this)' style="overflow:auto">
				<table id="conitor_body" style="table-layout:fixed;width:100%" 
 cellpadding=0 cellspacing=0>
					<colgroup>
						<col style="width:24px;text-align:center"/>
						<col style="width:24px;text-align:center"/>
					</colgroup>
					<tr>
						<td style="height:40px" colspan="1"></td>
                        <td style="height:40px" colspan="1"></td>
					</tr>
    </table>
</div>

现在需要我拖动表体的div横向滚动条，让表头也随之移动

<script type="text/javascript">
    //给表体的div绑定滚动条事件，
    $("#sc-table-body-div").scroll(function(){
      //两种方式（一个是属性设置，一二是方法设置）都写上，设置表头div的移动位置未表体的移动位置
	  try{$("#sc-table-head-div").attr("scrollLeft",$("#sc-table-body-    
     div").attr("scrollLeft"));}catch(e){}
	  try{$("#sc-table-head-div").scrollLeft($("#sc-table-body-div").scrollLeft());}catch(e){}
    });
</script>

完成

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/158227.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年7月1，如有侵权请联系 cloudcommunity@tencent.com 删除

java