layui表头跟随滚动条滑动_让layui table固定列也能监听滚动的方法介绍

本文介绍了如何使layui表格的表头在滚动时保持固定,同时处理左右固定列的滚动事件,确保内容与表头同步滚动。通过CSS hover、JavaScript事件监听和特定条件标记,解决了滚动过程中的样式和性能问题,提供了测试页面供参考。
摘要由CSDN通过智能技术生成

7cadc5a559a4f45c9c8a45d36273f584.png

目前table能滚动的区域是layMain这个区域,他会联动的去滚动表头和固定列,左右固定列实际他们本身的样式overflow是hidden的,所以本身不会出现滚动条,也就是说你把鼠标移动到左右固定列上去的话,它是无法被滚动的,比如下面这个效果图

9326c9cbf857cc672593f61d1686f4ec.gif

当然这个不是一两个样式就能搞定的事情,不然也就不需要整个帖子了,受限于layui table的实现方式特别是表头固定和左右列固定的实现方法,基本说只添加一两个css应该是处理不了的。

目前我的处理方式有几步:

第一步就是在特定的时候要让固定列区域下的tbody是可滚动的,这样子才能去监听由用户鼠标操作的滚动

这个一般可以利用一个css的hover来出来

17298caaa8063bf892d0e654bfbad550.png

但是,这个只是开头中的开头,还需要一些辅助处理,不然出来的结果就会是下面这样子的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值