table模块在layui 2.0的版本中全新推出,是layui最核心的组成之一。本篇文章给大家介绍一下让layui框架table固定列也能监听滚动的方法,希望对大家有所帮助。
目前table能滚动的区域是layMain这个区域,他会联动的去滚动表头和固定列,左右固定列实际他们本身的样式overflow是hidden的,所以本身不会出现滚动条,也就是说你把鼠标移动到左右固定列上去的话,它是无法被滚动的,比如下面这个效果图
当然这个不是一两个样式就能搞定的事情,不然也就不需要整个帖子了,受限于layui table的实现方式特别是表头固定和左右列固定的实现方法,基本说只添加一两个css应该是处理不了的。
目前我的处理方式有几步:
第一步就是在特定的时候要让固定列区域下的tbody是可滚动的,这样子才能去监听由用户鼠标操作的滚动
这个一般可以利用一个css的hover来出来
但是,这个只是开头中的开头,还需要一些辅助处理,不然出来的结果就会是下面这样子的
辅助处理呢,这个得先了解以下table目前的固定列的一些样式,比如如果有滚动条的话他会计算出来滚动条的宽度,然后有固定列的right就是根据这个值去得出来一个值,具体要看滚动条的宽度了。
如果内容少没有滚动的那么他的right就是-1,所以一般来说就是在hov