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)


相关推荐

  • ico图标在谷歌浏览器中如何显示?

    ico图标在谷歌浏览器中如何显示?

  • TCPIP协议

    TCPIP协议TCP/IP协议1.链路层:数据链路层或网络接口层(网络接口层和硬件层),通常包括操作系统中的设备驱动程序和计算机中对应的网络接口卡。处理与电缆(或其他任何传输媒介)的物理接口细节。转换IP层和网络接口层使用的地址。2.网络层:处理分组在网络中的活动,例如分组的选路。IP是一种网络层协议,提供的是一种不可靠的服务,它只是尽可能快地把分组从源结点送到目的结点,但是并不提供任何可靠性保证。…

  • idea激活码永久免费【2021免费激活】

    (idea激活码永久免费)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.htmlMLZPB5EL5Q-eyJsa…

  • 零基础学Java(5)输入与输出

    零基础学Java(5)输入与输出输入与输出读取输入要想通过控制台进行输入,首先需要构造一个与"标准输入流"System.in关联的Scanner对象。//创建输入流对象Scannerin=new

  • springmvc和mybatis面试题(含答案)

    springmvc和mybatis面试题(含答案)SpringMVCFramework有这样一些特点:1。它是基于组件技术的.全部的应用对象,无论控制器和视图,还是业务对象之类的都是java组件.并且和Spring提供的其他基础结构紧密集成.2。不依赖于ServletAPI(目标虽是如此,但是在实现的时候确实是依赖于Servlet的)3。可以任意使用各种视图技术,而不仅仅局限于JSP4。支持各种请求资源的映射策略5。它应是易于扩展的2

  • linux中获取日志5分钟以内的内容

    linux中获取日志5分钟以内的内容

发表回复

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

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