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

div滚动条联动「建议收藏」应用场景:一般是表头和表体,或者是需要联动的div,滚动一个div的滚动条,让另一个div的滚动条也随之滚动到一样的位置//表头<divid=”sc-table-head-div”class=”sc-table-head-div”style=”position:absolute;”> <tableid=”conitor_head”style=”…

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

应用场景:一般是表头和表体,或者是需要联动的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>

完成

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158227.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 蓝桥杯单片机必备知识—–(12)串口通讯

    蓝桥杯单片机必备知识—–(12)串口通讯

  • OpenCV中的width与widthStep

    OpenCV中的width与widthStep1.在opencv中width表示的是图像的每行像素数,widthstep表示的是存储一行像素需要的字节数,位了快速读取数据,在opencv中一般使widthStep为4的倍数,从而实现字节的对齐,有利于提高运算速度。2.函数的原型为image->widthStep=(((image->width*image->nChannels*(image->depth&~IPL_DEPTH_SIGN)+7)/8)+align-1)&(~(alig

  • vs 注释快捷键_VS2010快捷键

    vs 注释快捷键_VS2010快捷键在VisualStudioIDE中使用快捷键注释代码,无论是行注释还是块注释,第一步一定是选中要注释的内容(取消注释同样要先选中)!当然,如果是行注释,不必选取整行,将光标定位到该行即可!下面整理一下VisualStudioIDE中行注释和块注释的快捷键,以及快捷键的查看与修改。行注释行注释有以下两种方式!方式一:注释:Ctrl+K,Ctrl+C取消:Ctrl+K,Ctrl+U方式二:注释和取消都是这组快捷键:Ctrl+K,Ct…

  • mysql创建数据库的步骤_MySQL创建数据表

    mysql创建数据库的步骤_MySQL创建数据表MYSQL建立数据库的步骤:通过练习查询、创建数据库,并且向数据库内单个或通过txt文件批量插入数据的方法。

  • PyCharm使用教程 — 4、界面/菜单栏介绍

    PyCharm使用教程 — 4、界面/菜单栏介绍界面介绍从大的方向来看PyCharm分为菜单栏区域/项目结构区域/代码区域/运行信息区菜单栏提示:菜单栏快捷键为Alt+首字母,比如File的快捷键Alt+F,Edit的快捷键Alt+E1、File(文件)NewProject:创建新的项目New…:新建一些中间件配置,如MySQL、MongoDB、DDL等以及相关驱动NewScratchFile:划痕文档,也称为临时文件,可以创建各种类型的文件进行临时处理,在里面“打草稿”,

  • android离线打包[通俗易懂]

    android离线打包[通俗易懂]本文章参考官网和其他博客,如有侵权,立即删除官网地址:https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android需要的工具HBuilderX链接:https://www.dcloud.io/hbuilderx.htmlAndroidStudio链接:https://developer.android.google.cn/studio/index.htmlApp离线SDK链接:https://nativesupp…

    2022年10月31日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号