html 表格指定区域,js：table滚动到可视区域内时固定table头部在顶部

最新推荐文章于 2022-11-09 16:49:15 发布
最新推荐文章于 2022-11-09 16:49:15 发布
阅读量442 收藏
点赞数
文章标签： Vue.js 滚动固定 性能优化 函数节流 表格组件

index.html部分如下：

html,body {

padding: 0;

margin: 0;

}

.table-head-fixed {

position: fixed;

top: 0;

left: 0;

width: 100%;

}

table {

width: 100%;

}

th {

background-color: #ccc;

}

td,th {

height: 2rem;

width: 33.3%;

padding: 0.5rem;

box-sizing: border-box;

border-bottom: 1px solid #ccc;

border-right: 1px solid #ccc;

}

ul,li {

margin: 0;

padding: 0;

}

ul li {

list-style: none;

border-bottom: 1px solid #ccc;

padding: 1rem;

}

  • {{item.name}}

agenamesex
{{item.NAME}}{{item.ACTIVE_TYPE}}{{item.DATE}}

  • {{item.name}}

  • {{item.name}}

var demo = new Vue({

mixins: [table],

el: "#app",

data: function() {

return {}

},

watch: {},

mounted: function() {

this.scroll()

},

created: function() {},

methods: {

scroll: function() {

var that = this

window.addEventListener('scroll', that.throttle(that, that.fixedTable, 200))

},

//函数节流,在规定时间内才执行一次图片加载函数，解决耗费性能，浏览器卡顿问题。

throttle: function(that, fixedTable, wait) {

var lastTime = new Date().getTime()

return function() {

var curTime = new Date().getTime()

if(curTime - lastTime < wait) return

lastTime = curTime

fixedTable(that)

}

},

//固定table头部

fixedTable: function(that) {

var eleOffsetTop = that.$refs.tableBody.offsetTop - that.$refs.tableHead.clientHeight

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

var tableBodyH = that.$refs.tableBody.clientHeight

if(eleOffsetTop <= scrollTop && eleOffsetTop + tableBodyH > scrollTop) {

that.$refs.tableHead.className = "table-head table-head-fixed"

} else {

that.$refs.tableHead.className = "table-head"

}

}

}

})

混入js(table.js)部分如下：

var table = {

data: function() {

return {

ulData: [{

name: 1,

}, {

name: 2,

}, {

name: 3,

}, {

name: 4,

}, {

name: 5,

}, {

name: 6,

}, {

name: 4,

}, {

name: 5,

}, {

name: 6,

}, {

name: 4,

}, {

name: 5,

}, {

name: 6,

}],

tableData: [{

"NAME": "电影",

"TYPE": "兴趣",

"ACTIVE_TYPE": "社交",

"DATE": "2020-02-04",

"BEGIN_DATE": "09:30",

"END_DATE": "11:45",

"HOURS": "2小时15分钟",

"PERSON": 45,

"JOIN_PERSON": 30,

"SPONSOR": "独立区",

"LABEL": "",

"USE_PLACE": "2号楼多工能厅",

"SCOPE": "课程",

"SON_COURSE": "欣赏课",

"CLUB_NAME": "娱乐",

"TEACHER_NAME": "王xx",

"TEACHER_TYPE": "员工",

"DATA_UPDATE": "2020-02-04 13:50"

},

{

"NAME": "电影",

"TYPE": "兴趣",

"ACTIVE_TYPE": "社交",

"DATE": "2020-02-04",

"BEGIN_DATE": "09:30",

"END_DATE": "11:45",

"HOURS": "2小时15分钟",

"PERSON": 45,

"JOIN_PERSON": 30,

"SPONSOR": "独立区",

"LABEL": "",

"USE_PLACE": "2号楼多工能厅",

"SCOPE": "课程",

"SON_COURSE": "欣赏课",

"CLUB_NAME": "娱乐",

"TEACHER_NAME": "王xx",

"TEACHER_TYPE": "员工",

"DATA_UPDATE": "2020-02-04 13:50"

}, {

"NAME": "电影",

"TYPE": "兴趣",

"ACTIVE_TYPE": "社交",

"DATE": "2020-02-04",

"BEGIN_DATE": "09:30",

"END_DATE": "11:45",

"HOURS": "2小时15分钟",

"PERSON": 45,

"JOIN_PERSON": 30,

"SPONSOR": "独立区",

"LABEL": "",

"USE_PLACE": "2号楼多工能厅",

"SCOPE": "课程",

"SON_COURSE": "欣赏课",

"CLUB_NAME": "娱乐",

"TEACHER_NAME": "王xx",

"TEACHER_TYPE": "员工",

"DATA_UPDATE": "2020-02-04 13:50"

}, {

"NAME": "电影",

"TYPE": "兴趣",

"ACTIVE_TYPE": "社交",

"DATE": "2020-02-04",

"BEGIN_DATE": "09:30",

"END_DATE": "11:45",

"HOURS": "2小时15分钟",

"PERSON": 45,

"JOIN_PERSON": 30,

"SPONSOR": "独立区",

"LABEL": "",

"USE_PLACE": "2号楼多工能厅",

"SCOPE": "课程",

"SON_COURSE": "欣赏课",

"CLUB_NAME": "娱乐",

"TEACHER_NAME": "王xx",

"TEACHER_TYPE": "员工",

"DATA_UPDATE": "2020-02-04 13:50"

},

{

"NAME": "电影",

"TYPE": "兴趣",

"ACTIVE_TYPE": "社交",

"DATE": "2020-02-04",

"BEGIN_DATE": "09:30",

"END_DATE": "11:45",

"HOURS": "2小时15分钟",

"PERSON": 45,

"JOIN_PERSON": 30,

"SPONSOR": "独立区",

"LABEL": "",

"USE_PLACE": "2号楼多工能厅",

"SCOPE": "课程",

"SON_COURSE": "欣赏课",

"CLUB_NAME": "娱乐",

"TEACHER_NAME": "王xx",

"TEACHER_TYPE": "员工",

"DATA_UPDATE": "2020-02-04 13:50"

}, {

"NAME": "电影",

"TYPE": "兴趣",

"ACTIVE_TYPE": "社交",

"DATE": "2020-02-04",

"BEGIN_DATE": "09:30",

"END_DATE": "11:45",

"HOURS": "2小时15分钟",

"PERSON": 45,

"JOIN_PERSON": 30,

"SPONSOR": "独立区",

"LABEL": "",

"USE_PLACE": "2号楼多工能厅",

"SCOPE": "课程",

"SON_COURSE": "欣赏课",

"CLUB_NAME": "娱乐",

"TEACHER_NAME": "王xx",

"TEACHER_TYPE": "员工",

"DATA_UPDATE": "2020-02-04 13:50"

}, {

"NAME": "电影",

"TYPE": "兴趣",

"ACTIVE_TYPE": "社交",

"DATE": "2020-02-04",

"BEGIN_DATE": "09:30",

"END_DATE": "11:45",

"HOURS": "2小时15分钟",

"PERSON": 45,

"JOIN_PERSON": 30,

"SPONSOR": "独立区",

"LABEL": "",

"USE_PLACE": "2号楼多工能厅",

"SCOPE": "课程",

"SON_COURSE": "欣赏课",

"CLUB_NAME": "娱乐",

"TEACHER_NAME": "王xx",

"TEACHER_TYPE": "员工",

"DATA_UPDATE": "2020-02-04 13:50"

}, {

"NAME": "电影",

"TYPE": "兴趣",

"ACTIVE_TYPE": "社交",

"DATE": "2020-02-04",

"BEGIN_DATE": "09:30",

"END_DATE": "11:45",

"HOURS": "2小时15分钟",

"PERSON": 45,

"JOIN_PERSON": 30,

"SPONSOR": "独立区",

"LABEL": "",

"USE_PLACE": "2号楼多工能厅",

"SCOPE": "课程",

"SON_COURSE": "欣赏课",

"CLUB_NAME": "娱乐",

"TEACHER_NAME": "王xx",

"TEACHER_TYPE": "员工",

"DATA_UPDATE": "2020-02-04 13:50"

}, {

"NAME": "电影",

"TYPE": "兴趣",

"ACTIVE_TYPE": "社交",

"DATE": "2020-02-04",

"BEGIN_DATE": "09:30",

"END_DATE": "11:45",

"HOURS": "2小时15分钟",

"PERSON": 45,

"JOIN_PERSON": 30,

"SPONSOR": "独立区",

"LABEL": "",

"USE_PLACE": "2号楼多工能厅",

"SCOPE": "课程",

"SON_COURSE": "欣赏课",

"CLUB_NAME": "娱乐",

"TEACHER_NAME": "王xx",

"TEACHER_TYPE": "员工",

"DATA_UPDATE": "2020-02-04 13:50"

},

{

"NAME": "电影",

"TYPE": "兴趣",

"ACTIVE_TYPE": "社交",

"DATE": "2020-02-04",

"BEGIN_DATE": "09:30",

"END_DATE": "11:45",

"HOURS": "2小时15分钟",

"PERSON": 45,

"JOIN_PERSON": 30,

"SPONSOR": "独立区",

"LABEL": "",

"USE_PLACE": "2号楼多工能厅",

"SCOPE": "课程",

"SON_COURSE": "欣赏课",

"CLUB_NAME": "娱乐",

"TEACHER_NAME": "王xx",

"TEACHER_TYPE": "员工",

"DATA_UPDATE": "2020-02-04 13:50"

}, {

"NAME": "电影",

"TYPE": "兴趣",

"ACTIVE_TYPE": "社交",

"DATE": "2020-02-04",

"BEGIN_DATE": "09:30",

"END_DATE": "11:45",

"HOURS": "2小时15分钟",

"PERSON": 45,

"JOIN_PERSON": 30,

"SPONSOR": "独立区",

"LABEL": "",

"USE_PLACE": "2号楼多工能厅",

"SCOPE": "课程",

"SON_COURSE": "欣赏课",

"CLUB_NAME": "娱乐",

"TEACHER_NAME": "王xx",

"TEACHER_TYPE": "员工",

"DATA_UPDATE": "2020-02-04 13:50"

}, {

"NAME": "电影",

"TYPE": "兴趣",

"ACTIVE_TYPE": "社交",

"DATE": "2020-02-04",

"BEGIN_DATE": "09:30",

"END_DATE": "11:45",

"HOURS": "2小时15分钟",

"PERSON": 45,

"JOIN_PERSON": 30,

"SPONSOR": "独立区",

"LABEL": "",

"USE_PLACE": "2号楼多工能厅",

"SCOPE": "课程",

"SON_COURSE": "欣赏课",

"CLUB_NAME": "娱乐",

"TEACHER_NAME": "王xx",

"TEACHER_TYPE": "员工",

"DATA_UPDATE": "2020-02-04 13:50"

}, {

"NAME": "电影",

"TYPE": "兴趣",

"ACTIVE_TYPE": "社交",

"DATE": "2020-02-04",

"BEGIN_DATE": "09:30",

"END_DATE": "11:45",

"HOURS": "2小时15分钟",

"PERSON": 45,

"JOIN_PERSON": 30,

"SPONSOR": "独立区",

"LABEL": "",

"USE_PLACE": "2号楼多工能厅",

"SCOPE": "课程",

"SON_COURSE": "欣赏课",

"CLUB_NAME": "娱乐",

"TEACHER_NAME": "王xx",

"TEACHER_TYPE": "员工",

"DATA_UPDATE": "2020-02-04 13:50"

}, {

"NAME": "电影",

"TYPE": "兴趣",

"ACTIVE_TYPE": "社交",

"DATE": "2020-02-04",

"BEGIN_DATE": "09:30",

"END_DATE": "11:45",

"HOURS": "2小时15分钟",

"PERSON": 45,

"JOIN_PERSON": 30,

"SPONSOR": "独立区",

"LABEL": "",

"USE_PLACE": "2号楼多工能厅",

"SCOPE": "课程",

"SON_COURSE": "欣赏课",

"CLUB_NAME": "娱乐",

"TEACHER_NAME": "王xx",

"TEACHER_TYPE": "员工",

"DATA_UPDATE": "2020-02-04 13:50"

},

{

"NAME": "电影",

"TYPE": "兴趣",

"ACTIVE_TYPE": "社交",

"DATE": "2020-02-04",

"BEGIN_DATE": "09:30",

"END_DATE": "11:45",

"HOURS": "2小时15分钟",

"PERSON": 45,

"JOIN_PERSON": 30,

"SPONSOR": "独立区",

"LABEL": "",

"USE_PLACE": "2号楼多工能厅",

"SCOPE": "课程",

"SON_COURSE": "欣赏课",

"CLUB_NAME": "娱乐",

"TEACHER_NAME": "王xx",

"TEACHER_TYPE": "员工",

"DATA_UPDATE": "2020-02-04 13:50"

}, {

"NAME": "电影",

"TYPE": "兴趣",

"ACTIVE_TYPE": "社交",

"DATE": "2020-02-04",

"BEGIN_DATE": "09:30",

"END_DATE": "11:45",

"HOURS": "2小时15分钟",

"PERSON": 45,

"JOIN_PERSON": 30,

"SPONSOR": "独立区",

"LABEL": "",

"USE_PLACE": "2号楼多工能厅",

"SCOPE": "课程",

"SON_COURSE": "欣赏课",

"CLUB_NAME": "娱乐",

"TEACHER_NAME": "王xx",

"TEACHER_TYPE": "员工",

"DATA_UPDATE": "2020-02-04 13:50"

}, {

"NAME": "电影",

"TYPE": "兴趣",

"ACTIVE_TYPE": "社交",

"DATE": "2020-02-04",

"BEGIN_DATE": "09:30",

"END_DATE": "11:45",

"HOURS": "2小时15分钟",

"PERSON": 45,

"JOIN_PERSON": 30,

"SPONSOR": "独立区",

"LABEL": "",

"USE_PLACE": "2号楼多工能厅",

"SCOPE": "课程",

"SON_COURSE": "欣赏课",

"CLUB_NAME": "娱乐",

"TEACHER_NAME": "王xx",

"TEACHER_TYPE": "员工",

"DATA_UPDATE": "2020-02-04 13:50"

}, {

"NAME": "电影",

"TYPE": "兴趣",

"ACTIVE_TYPE": "社交",

"DATE": "2020-02-04",

"BEGIN_DATE": "09:30",

"END_DATE": "11:45",

"HOURS": "2小时15分钟",

"PERSON": 45,

"JOIN_PERSON": 30,

"SPONSOR": "独立区",

"LABEL": "",

"USE_PLACE": "2号楼多工能厅",

"SCOPE": "课程",

"SON_COURSE": "欣赏课",

"CLUB_NAME": "娱乐",

"TEACHER_NAME": "王xx",

"TEACHER_TYPE": "员工",

"DATA_UPDATE": "2020-02-04 13:50"

}

]

}

},

}

韩睿芝
关注
table表头行不动
bruobuqi的博客
12-27 4124
今天遇到一个问题怎么使表头行不动 如图： 仔细思考之后发现没有此类的参考怎么办呢？ 解决方案是使用俩个table：1.一个table是表头，一个table是下面的 具体代码如下： //html代码：     具体js代码：因为我的table是动态生成的 function CreateTable(Count) { //动态生成table var tabl
js table 表头动态悬浮固定简单实现
ZhiMaHuyizhi的博客
03-31 1683
背景： table表单过长过宽，x、y轴都超出了屏幕。下拉表单时，表头距窗口top距离为负时需要将表头悬浮固定在窗口上方，且左右滑动表单时悬浮的表头需要同步滑动 思路： 1、何时悬浮： 获取表头据窗口top的距离L1，获取窗口纵向滚动条下拉的距离L2，若L2 > L1,此时表头悬浮固定。 2、如何悬浮： 因为表格的内容是自由扩展的，所以每一列的列宽是由表头和表内的元素共同决定的，单独把表头拿出来不行，格式会与原表格不一致。最后实现方式：实时监控滚动事件$(window).scroll(fu
利用js+css+html实现固定table的列头不动
11-26
话不多说，跟这小编来一起看下吧 1、CSS <style type="text/css"> #scroll_head { position: absolute; display: none; } </style> 2、Javascript [removed] //该函数在上面一个table数据加载完成后调用 //把表头的宽度设置到会滚动的页头去 var copyWidth = function () { var b = $('#data_tbody').prev().find('tr:last').fi
html css 控制div或者table等固定在指定位置的实现方法
12-13
CSS Code复制内容到剪贴板 .bottomTable{     background-color: rgb(249,249,249);     z-index:99999999; position:fixed; bottombottom:0; left:0; width:100%; _position:absolute; /* for IE6 */   /* _top: [removed]document.body.scrollTop+document.body.clientHeight-this.offsetHeight);    */  
JS-元素超过可视区域后固定在头部
wang704987562的博客
08-11 1792
使用 JS实现元素超过可视区域后固定在头部功能 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;style&a
JS--滚动条滚动事件，拖动滚动条导航栏固定到页面顶部
Binglili0809的博客
03-22 608
div{ width: 300px; height: 200px; overflow: auto; } <div id="dv"> 战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病毒战胜病...
JavaScript：固定table的表头
weixin_30673715的博客
11-13 106
当表格数据很多，以致于容器块元素出现滚动条。而在滚动滚动条的时候，数据行会被块元素遮挡。若要保持表格的head部分始终在可视范围内，我们需要对表头进行特殊的样式设置。下面的jsp代码可以实现表头固定，经过测试可以直接使用。在IE浏览器下，拉动滚动条时表头会抖动，在谷歌下确实很流程，估计是浏览器的兼容性问题。 <!doctype html public "-//w3c//dtd html...
js实现table 表头顶部固定方法
这么多柠檬c
02-06 1934
业务需求需要顶部固定表头方式实现。 <div> <div class="table-head" style="margin-bottom: -20px;"> <table class="table table-striped"> <thead> <th>期数</th> <th>时间</th>
JS实现table表格固定表头且表头随横向滚动而滚动
11-30
当滚动位置在阈值范围内时，表头的`top`值会更新，确保它始终在可视区域内。当滚动超出阈值时，表头会回到初始位置。 值得注意的是，这里的`50`值是由于作者的头部导航固定在顶部，高度为`50px`，因此需要加上这个...
jQuery表格顶部右侧固定滚动代码
06-24
当表格需要滚动时，通过监听滚动事件，动态调整固定列的位置，确保它们始终在可视区域内。 要实现这个功能，开发者通常会采用以下步骤： 1. **初始化表格结构**：创建一个包含表头（thead）、左侧固定列（left-...
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
05-09
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
jQuery插件冻结行列、固定列固定行，html、table实现
06-05
该插件名为"jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll"，其主要功能是在表格滚动时保持顶部行和左侧列固定，以便用户在浏览长表格时仍能清晰地看到表头和关键列。以下我们将深入探讨这个插件的工作原理...
FixedTable.rar
07-05
在网页滚动时，表格的列标题会保持在可视区域内，这使得用户在浏览长表格时始终能够看到列名，清晰地知道每一行数据对应的具体信息，尤其是在处理多列和大数据量的表格时，这种功能尤为重要。FixedTable通过CSS定位...
【HTML5】html5中列表、表格、表单控件、浮动框架及结构化标签知识详解大全
zhongqingtian的博客
05-18 526
【HTML5】html5中列表、表格、表单控件、浮动框架及结构化标签知识详解大全
table表格添加数据自动滚动到当前添加位置
m0_63701303的博客
11-09 378
表格添加数据自动滚动到当前添加位置
html里table自动滚动,html中表table行循环滚动例子(示例代码)
weixin_39808803的博客
06-01 1716
滚动表格.table{width: 100%;left:30%;border-collapse:collapse;border-spacing:0;}.fixedThead{display: block;width: 100%;}.scrollTbody{display: block;height: 316px;overflow: hidden;width: 100%;}.table td {wi...
html控制滚动条滚动到位置,jQuery实现将div中滚动条滚动到指定位置的方法
weixin_39524574的博客
06-04 474
本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法。分享给大家供大家参考，具体如下：一、Js代码：onload = function () {//初始化scrollToLocation();};function scrollToLocation() {var mainContainer = $('#thisMainPanel'),scrollToContainer = mainCo...
js实现table表头冻结（scroll时固定）
zp19860529的博客
08-14 2810
方案一： 思路：当table在父容器中滑动滚动条显示内容时，使用scrollTop判断边界，同时使用JQuery中的clone方法，把原table创建复制一份，插入到动态创建的一个div中，再将该div的position设置为fixed,height设置table中的thread的高度即可。 示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
opencv_python-4.1.0.25-cp37-cp37m-linux_armv7l.whl
最新发布
11-18
opencv_python-4.1.0.25-cp37-cp37m-linux_armv7l.whl
CSS display:table布局：告别HTML表格，创建灵活栅格
本文主要探讨了基于`display:table`的CSS布局技术，这是一种在IE8及后续版本中引入的新特性，它允许开发者以表格的方式来设计HTML元素的布局，从而替代传统的HTML表格和绝对/浮动定位的复杂性。在IE8以前的浏览器不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值