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>

完成

 

 

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

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

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 软测试总结

    软测试总结

    2022年1月12日
  • goland 2022.01 最新激活码_在线激活

    (goland 2022.01 最新激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html0HKLM1UCCY-eyJsaWNlbnNlSWQi…

    2022年3月31日
  • 文本相似度度量_文本相似度分析

    文本相似度度量_文本相似度分析文本相似度度量就是衡量两个文本相似度的算法。主要包括两个步骤:将文本表示为向量(文本表示);衡量两个向量的相似度(相似度度量)。1文本表示文本表示也包括两部分:文本切分粒度(按什么粒度切分得到文本特征),如何构造特征(如何将文本特征转化成数值特征)。1.1文本切分粒度可以按照字,词,n-gram对文本进行切分;当文本是长文本时,也可以利用主题模型提取关键词,来减少词的维度。1.2文本特征构建特征构建就是如何将词袋模型中的词转化成向量表示。可以用one-hot,对应位置的权重可以是TF或者.

    2022年10月26日
  • 应用迁云之镜像迁移-(1)概述

    应用迁云之镜像迁移-(1)概述

    2022年2月23日
  • %d啥意思java_编程“%d”代表什么意思?

    %d啥意思java_编程“%d”代表什么意思?展开全部%d:表示把数据bai按十进制整型du输出。%o:表zhi示把数据按dao八进制整型版输权出。%x:表示把数据按十六进制整型输出。%u:表示把数据参数按无符号整型输出。%f:显示小数表示的普通浮点数。拓展资料:C语言是一门通用计算机编程语言,广泛应用于底层开发。C语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。尽管C…

    2022年7月9日
  • Nginx日志管理——了解Nginx日志选项配置以及自定义日志格式使用「建议收藏」

    Nginx日志管理——了解Nginx日志选项配置以及自定义日志格式使用「建议收藏」一、引言不管什么程序,一般都会有日志的。哪怕你在浏览器上网访问了一个网站,也会有记录保存的。在这个里互联网时代,想在网上不留下痕迹那是很难的。在我们开发一个程序,日志功能往往也是不可缺少的,今天我们就来讲讲这个Nginx的日志是怎么样来玩的。二、了解日志管理我们查看nginx安装目录下有个logs,包含了三个文件"access.log、error.log、nginx.pid"。…

    2022年6月3日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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