iview的表头如何随着页面滚动可以固定住(关于position: sticky的一些新理解)

今天需要实现这样一个需求(如下图):在表格往下拖动的时候,需要固定表头
iview的表头如何随着页面滚动可以固定住(关于position: sticky的一些新理解)_第1张图片

整体思路:自己用iview写的,当时自己想得是这个表头用绝对定位,根据页面滚动的距离从而计算出定位数值,但是这样有个问题,就是当数据多的时候,很快去滚动页面的话,这个表头会出现抖动的状态,应该计算定位px数值的时候耗了点时间,当时自己参照别人网站的时候,发现别人用的是position: sticky,自己当时也百度去搜了position: sticky的用法,发现有点乱,所以自己用google搜了下MDN文档,从而看到一个比较系统的说法:
iview的表头如何随着页面滚动可以固定住(关于position: sticky的一些新理解)_第2张图片上面的意思总结就是:

元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
该值总是创建一个新的层叠上下文(stacking context)。注意,一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时),即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为(详情见Github issue on W3C CSSWG)。

当时自己就是没有看清文档上面写着当祖先元素的overflow 是 hidden, scroll, auto, 或 overlay,所以造成自己即使给表头加上position: sticky也是没有生效的,还好参照了下别人的网站才知道是需要把祖先元素的overflow去掉的,或者改成默认值(visible),即如下:
iview的表头如何随着页面滚动可以固定住(关于position: sticky的一些新理解)_第3张图片

以上就可以处理了表头随着页面滚动,还是可以固定到表格上面。

你可能感兴趣的:(业务场景,vue,css,javascript,vue,css)