首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

获取表头部分的绝对/全局位置,同时考虑水平滚动

获取表头部分的绝对/全局位置,同时考虑水平滚动,可以通过以下步骤实现:

  1. 首先,需要确定表格的HTML结构,通常表头部分会被包裹在<thead>标签中,而表格内容则会被包裹在<tbody>标签中。可以使用HTML的DOM操作方法(如getElementById、getElementsByClassName等)获取到表格元素。
  2. 通过CSS样式设置表格容器的固定高度和overflow属性,以实现垂直滚动。例如,可以设置表格容器的高度为固定值,同时将overflow-y属性设置为scroll。
  3. 使用JavaScript获取表头部分的位置信息。可以通过以下步骤实现:
    • 获取表格容器的scrollTop属性,该属性表示滚动条向下滚动的距离。
    • 获取表格容器内的表头元素(通常是<thead>标签),并获取其相对于表格容器的offsetTop属性,该属性表示元素相对于容器顶部的距离。
    • 将scrollTop属性的值与offsetTop属性的值相加,即可得到表头部分的绝对/全局位置。
  • 考虑水平滚动时,需要获取表格容器的scrollLeft属性,该属性表示滚动条向右滚动的距离。如果表格容器内有水平滚动条,可以通过该属性获取滚动的距离。

综上所述,获取表头部分的绝对/全局位置,同时考虑水平滚动,可以通过JavaScript获取表格容器的scrollTop和scrollLeft属性,并结合表头元素的offsetTop属性计算得出。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

动手练一练,手写一个价格对比、固定表头滚动表格

虽然有不少相关插件提供了类似的功能,比如 ScrollMagic.js,但是今天实例,我们将用纯原生方式进行实现,当滚动滚动至表格位置,固定表头位置,表格内容查看完后,取消固定表头功能。...今天我们将通过一个界面十分漂亮功能价格对比表格,展示固定表头功能,实例操作展示如视频所示,当滚动滚动至表格位置,添加表头固定样式,当滚动至表格底部,移除固定表头样式。...获取用户从视口顶部滚动距离(pageYOffset) 获取最后一部分内容区域距离窗口顶部高度(getBoundingClientRect().top) 检测滚动条是否滚动到表格区域。...如果滚动到表格区域,获取重置后表头宽度。 接下来我们来判断第三部分内容区域距离视口顶部高度是否大于表头高度。...如果滚动滚动至第三部分内容区域,我们将移除固定表头样式stickyClass,添加移除固定表头样式 sticky2-table。

3.2K31

如何纯CSS实现标题栏、表格头水平滚动垂直不滚动

有些报表会很宽,浏览器水平放不下,需要水平滚动显示,这个可以设置overflow-y:hidden实现,很基本实现,没什么难度。但是,如果同时希望垂直滚动时候,表格头是固定。此时该如何实现呢?...box{display:flex;flex-direction:column;}.top{height:30px;}.content{flex:1}但是实现代码比起  :《纯CSS实现标题栏、表格头水平滚动垂直不滚动... 》其实就是利用 position: sticky; 属性,固定表头。...https://codepen.io/lujun-zhou/pen/MWmGMyP如果使用 绝对定位实现,这个其实没有啥好说。...转载本站文章《如何纯CSS实现标题栏、表格头水平滚动垂直不滚动》,请注明出处:https://www.zhoulujun.cn/html/webfront/SGML/html5/2021_0731_8650

1.6K00
  • 自定义按钮~自适应布局~常见bug

    87 88 89 90 二、BUG 问题:如果参照物没有触发haslayout,那么在ie6中“绝对定位容器...时候,都会加上zoom:1来解决很多ie下问题 问题:在ie67下,红色区域溢出,拖动垂直或水平滚动条时,红色区域不会动 解决方案:只需要在有滚动容器上也设置相对定位即可。...问题:IE6下参照物宽高为奇数时,绝对定位元素设置了位置为0或100%时,仍会有1px空隙 解决方案:设为偶数 问题:浮动时margin加倍 解决:设置为inline 三、布局 全局自适应 所有元素绝对定位...DOCTYPE html> 2 3 4 5 全局自适应布局</title...表头固定内容滚动表格 给内容设置最大高度值,超出时使用滚动条 注意:overflow-y是用来给div进行裁剪,所以tbody部分需要在div中 table>head,div(table>tbody

    1.2K20

    js怎么让指定方法先后顺序_jquery固定table表头

    * 功能:固定表头 * 参数 viewid 表格id * scrollid 滚动条所在容器id * size 表头行数(复杂表头可能不止一行) */ function scroll...(viewid, scrollid, size) {   // 获取滚动条容器   var container = document.getElementById(scrollid);   //...divposition属性为absolute,即绝对定于滚动条容器(滚动条容器position属性必须为relative)   bak.style.position = “absolute”;...0,即该div与滚动条容器紧贴   bak.style.left = 0;   // 设置divtop属性为0,初期时滚动位置为0,此属性与left属性协作达到遮盖原表头   bak.style.top...= “0px”;   bak.style.width = “100%”;   // 给滚动条容器绑定滚动滚动事件,在滚动滚动事件发生时,调整拷贝得来表头top值,保持其在可视范围内,且在滚动条容器顶端

    7.3K20

    scrollwidth和clientwidth_vue监听页面滚动

    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容最顶端之间距离 scrollWidth:获取对象滚动宽度...offsetTop:获取对象相对于版面或由 offsetTop 属性指定父坐标的计算顶端位置 event.clientX 相对文档水平座标 event.clientY 相对文档垂直座标...obj.offsetWidth 指 obj 控件自身绝对宽度,不包括因 overflow 而未显示部分,也就是其实际占据宽度,整型,单位像素。...obj.offsetHeight 指 obj 控件自身绝对高度,不包括因 overflow 而未显示部分,也就是其实际占据高度,整型,单位像素。...我们已经知道 offsetHeight 是自身元素宽度,而 scrollHeight 是内部元素绝对宽度,包含内部元素隐藏部分

    1.8K10

    【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

    固定在屏幕中某个位置 , 即使拖动滚动条 , 固定定位元素仍然保持位置不变 ; 固定定位 完全脱离 标准流 , 不占用 布局中位置 , 漂浮在任何元素上方 ; 固定定位 只相对于 浏览器可视窗口...进行定位 , 定位方式是通过 " 浏览器可视窗口 + 边偏移 " 进行定位 ; 固定定位 与 父元素没有任何关系 ; 固定定位 与 滚动滚动没有任何关系 ; 固定定位元素 始终显示在浏览器可视窗口固定位置...元素位置 ; 低版本浏览器不支持固定定位 , 如 : IE6 浏览器 ; 10、绝对定位元素设置 水平 / 垂直 居中 绝对定位 不能通过 设置 margin: auto; 样式方式 ,...和 绝对定位 / 固定定位 元素 , 都是脱标的 , 都不会触发 外边距塌陷 问题 , 为 盒子设置 浮动 / 定位 , 就不用考虑 外边距塌陷问题 ; 14、使用绝对定位 / 浮动解决外边距塌陷问题...; 18、overflow 隐藏对象 overflow 只能对超出部分隐藏代码 ; overflow 可设置值 : visible : 子元素超出父容器部分仍然显示 ; hidden : 子元素超出父容器部分隐藏

    18010

    TDesign 更新周报(2022 年 4 月第 2 周)

    属性无效问题 Upload: 修复 remove、selectChange 时间回调异常问题 修复取消上传逻辑异常 Features Popup: content 尺寸变化后自动更新位置 Slider...e 和 currentColumn 列配置功能,新增 buttonProps,用于支持完全自定义「列配置按钮」风格和内容 列配置功能,新增 placement,用于控制「列配置按钮 」相对于表格组件位置...树形结构中,新增 toggleExpandData,用于控制行展开 树形结构中,无法获取到正确 rowKey 时,抛出错误,提醒用户修改 table-layout: fixed 模式,且内容超出时,...设置默认列宽为 100,避免出现列宽为 0 消失情况 即使没有行选中列,依然支持 selectedRowKeys 添加类名 行选中和行类名透传,同时存在时,自定义行类名透传失效问题 修复 tfoot>...:过滤图标、空元素、异步加载文本配置、排序按钮文本配置 新增 scroll 滚动事件 新增表头吸顶功能 新增综合功能:多级表头 + 固定表头 + 固定列 + 表头吸顶 + 虚拟滚动 + 自定义列配置 过滤功能

    2.1K10

    TDesign 更新周报(2022年4月第1周)

    同时传入 key、load 时选中项显示问题 修正 TreeSelect 交互行为,与 Select 保持一致 修复 filter 状态下,树无法折叠问题;修复 lazy 状态下,无法正确展示...ConfigProvider: 完善语言配置能力 Table: 表格超出省略浮层父元素更为表头 thead,避免挂载到全局 body 过滤功能浮层元素默认挂载到 t-table,不再挂载到全局 详情见:...) Table: 自定义列配置功能:多级表头和列显示配置同时存在时,无法进行正确列配置问题,列配置仅显示了第一层表头 verticalAlign 不生效问题 右上角出现文字穿透问题 固定表头和固定列...控制台报错 t-primary-table 未注册 表格组件设置 height 或 maxHeight 后未出现滚动时候竖线不对齐 修复,排序图标和过滤图标同时存在时,样式异常问题 Features...滚动事件 新增表头吸顶功能 新增综合功能:多级表头 + 固定表头 + 固定列 + 表头吸顶 + 虚拟滚动 + 自定义列配置 详情见:https://github.com/Tencent/tdesign-vue

    2.4K20

    B端产品设计规范

    3、方便产品迭代,辅助设计和开发更好完成设计协作 随着产品设计业务变化,发现一些问题或者需要优化用户体验时候,针对单个控件进行调整,就可以影响全局,十分便捷,同时大家遵循设计规范,辅助设计师高效理解业务...列标题:表头列标题最多输入 8 个字符。 滚动条:表格内容超过一屏需要显示竖向滚动条时,需要固定表头。只需滚动表格内容就好。如下图所示。...空数据:表格某部分无数据时用 “-” 来填充显示,对于数据为零单元格,填上 0 即可。...当图上有数据日期、数据指标需要说明时,应当在恰当时间、 合适位置给予说明,以帮助阅读者更好地理解数据。 有效,如下图所示。...前端开发团队也会分好几个人一起做项目,同时一个大产品设计,都会分成多个小模块、按照时间、优先级来逐步开发设计项目。

    4.3K45

    JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

    offsetTop:获取对象相对于版面或由 offsetTop 属性指定父坐标的计算顶端位置 event.clientX 相对文档水平座标 event.clientY 相对文档垂直座标 event.offsetX...obj.offsetWidth 指 obj 控件自身绝对宽度,不包括因 overflow 而未显示部分,也就是其实际占据宽度,整型,单位像素。...obj.offsetHeight 指 obj 控件自身绝对高度,不包括因 overflow 而未显示部分,也就是其实际占据高度,整型,单位像素。...我们已经知道 offsetHeight 是自身元素宽度,而 scrollHeight 是内部元素绝对宽度,包含内部元素隐藏部分。...,clientTop: 这两个返回是元素周围边框厚度,如果不指定一个边框或者不定位改元素,他值就是0. 3.scrollLeft,scrollTop: 如果元素是可以滚动,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远

    7.2K20

    html和css进阶

    3.对于get方式,服务器端用Request.QueryString获取变量值,对于post方式,服务器端用Request.Form获取提交数据。 4.get传送数据量较小,不能大于2KB。...:如果内容超出则加滚动条 */ overflow: auto; /* 溢出滚动:无论内容是否超出都显示滚动位置 */ /* overflow: scroll...固定定位和绝对定位最大区别就是,设置了固定定位元素不变化,但是网页其他内容会动。就好像网站里面,那些讨人厌小广告,好像粘在了屏幕上一样,一直不改变位置。...2、****父级绝对导致居中不生效 -- 绝对定位标签水平垂直居中 3、定位标签z-index改变显示顺序 4、opacity测试内容和背景透明...blockquote缩进标签一个块大小;fieldset线中有个缺口写文字;hr做水平分割线用;pre格式化输出(代码里面文字原样输出到网页位置); div没加宽度,那么会默认和父级宽度一样;

    3.5K50

    前端如何实现高性能表格?

    单元格使用 DIV 绝对定位 即每个单元格都是用绝对定位 DIV 实现,整个表格都是有独立计算位置 DIV 拼接而成: 这样做前提是: 所有单元格位置都要提前计算,这里可以利用 web worker...如图所示有 16 个单元格,当我们向右下滑动一格时,中间 3x3 即 9 个格子区域是完全不会重新渲染,这样零散绝对定位分布可以最大程度维持单元格本来位置。...但局部计算肯定是不准确,如下图所示: 但出于性能考虑,我们初始化可能仅能计算前三行高度,此时,我们需要在滚动时做两件事情: 在快速滚动时候,向 web worker 发送预计要滚动位置,增量计算这些位置文字宽度...宽度计算完毕后,快速刷新当前屏幕单元格宽度,但在宽度校准同时,维持可视区域内左对齐不变,如下图所示: 这样滚动过程中虽然单元格会被突然撑开,但位置并不会产生相对移动,与提前全量撑开后视觉内容相同,因此用户体验并不会有实际影响...好在,即便是全量计算,我们也只需要考虑部分数据,假设行列数量都是 n,可以将计算复杂度由 O(n²) 降低为 O(n): 这种计算字段处理无法保证支持无限数量级数据,但可以大大降低计算时间,假设

    3.5K10

    精读《高性能表格》

    单元格使用 DIV 绝对定位 即每个单元格都是用绝对定位 DIV 实现,整个表格都是有独立计算位置 DIV 拼接而成: 这样做前提是: 所有单元格位置都要提前计算,这里可以利用 web worker...如图所示有 16 个单元格,当我们向右下滑动一格时,中间 3x3 即 9 个格子区域是完全不会重新渲染,这样零散绝对定位分布可以最大程度维持单元格本来位置。...但局部计算肯定是不准确,如下图所示: 但出于性能考虑,我们初始化可能仅能计算前三行高度,此时,我们需要在滚动时做两件事情: 在快速滚动时候,向 web worker 发送预计要滚动位置,增量计算这些位置文字宽度...宽度计算完毕后,快速刷新当前屏幕单元格宽度,但在宽度校准同时,维持可视区域内左对齐不变,如下图所示: 这样滚动过程中虽然单元格会被突然撑开,但位置并不会产生相对移动,与提前全量撑开后视觉内容相同,因此用户体验并不会有实际影响...好在,即便是全量计算,我们也只需要考虑部分数据,假设行列数量都是 n,可以将计算复杂度由 O(n²) 降低为 O(n): 这种计算字段处理无法保证支持无限数量级数据,但可以大大降低计算时间,假设

    1.1K40

    System|缓存|Rethinking LRU

    但是,虽然惰性插入已经减少了很多插入表头,但是插入表头依然是竞争。因此Linux用了lru cache进行了batching,一次性处理多个插入表头以减少锁获取。...硬件有很多LRU近似实现。 CPU cache Tree-PLRU 利用二叉树来确定LRU位置,0表示左,1表示右。...IPC Improvements ---- 分布式缓存淘汰 Redis 采样式 LRU 实现位于evict.c中,通过近似算法来淘汰相对不经常使用元素,其实就是之前时间戳排序弱化版,淘汰是采样部分...第二步,计算Idle 维持一个全局LRU时钟作为时间戳,如果刷新速度比服务器要求刷新速度快,就用服务器缓冲LRU,否则用实时。...淘汰是局部LRU,而不是全局LRU。

    84310

    纯css实现纵向滚动固定表头与横向内容滚动

    这次要实现目标是类似这种,纵向滚动表头固定,横向滚动时,表头跟着滚动 ?...滚动条被滚走了 然后想到了是用js来同步,可以是可以,但是还是想挣扎一下。 之后想到了fixed,发现如果表头设置为fixed无论横向滚动还是都会被固定在原地。...最后突然想到一个position新属性,sticky 设置了position: sticky ,在屏幕范围(viewport)时该元素位置并不受到定位影响(设置是top、left等属性无效),当该元素位置将要移出偏移范围时...,定位又会变成fixed,根据设置left、top等属性成固定位置效果(https://www.cnblogs.com/s1nker/p/4835079.html)。...image.png 不过sticky兼容性也是要考虑一下。 ? image.png

    5.3K00

    用Javascript获取页面元素位置

    很显然,如果网页内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页大小和浏览器窗口大小是相等。如果不能全部显示,则滚动浏览器窗口,可以显示出网页各个部分。...这两个属性指元素内容部分再加上padding所占据视觉面积,不包括border和滚动条占用空间。...所以,只需要将这两个值进行累加,就可以得到该元素绝对坐标。 (图二 offsetTop和offsetLeft属性) 下面两个函数可以用来获取绝对位置横坐标和纵坐标。   ...五、获取网页元素相对位置 网页元素相对位置,指该元素左上角相对于浏览器窗口左上角坐标。 有了绝对位置以后,获得相对位置就很容易了,只要将绝对坐标减去页面的滚动滚动距离就可以了。...滚动滚动垂直距离,是document对象scrollTop属性;滚动滚动水平距离是document对象scrollLeft属性。

    3.3K70

    史上最易懂——ReactNative分组列表SectionList使用详情及示例详解

    getItem any 获取控件绑定数据 getItemCount any 获取绑定数据条数 getItemLayout (data: ?...* index, index} )} 注意如果你指定了SeparatorComponent,请把分隔线尺寸也考虑到offset计算之中。...比如,0.5表示距离内容最底部距离为当前列表可见长度一半时触发 onRefresh void 如果设置了此选项,则会在列表头部添加一个标准RefreshControl控件,以便实现“下拉刷新”功能...方法集合: 方法名 说明 scrollToLocation 将可视区内位于特定sectionIndex 或 itemIndex (section内)位置列表项,滚动到可视区制定位置。...viewOffset是一个以像素为单位,到最终位置偏移距离固定值,比如为了弥补粘接header所占据空间 注意: 如果没有设置getItemLayout,就不能滚动到位于外部渲染区位置

    4.5K140
    领券