在前端开发中经常遇到需要页面滚动时,固定某个区域显示,常见表格的需求,因为表格有很多列,如果列名不固定在顶部显示,滚动到底部时,可能就不知道某些列对应的是什么了
那我们就聊一下如何在滚动时固定(thead),让它始终显示在列表的上方
css的方案
如何让tbody滚动
如果我们用css来实现,网上常见的一种方案是给tobdy一个固定高度,然后让它滚动,这样就实现了滚动列表时,thead不动。
有同学说tbody没办法滚动,所以网上也有用div来拼表格的,这样就容易滚动了。其实tbody也可以滚动的,比如tbody{display:block} 这样列的宽度就需要用css来控制了,总之是可以达到的。
这个方案的缺点在于,页面上有很多滚动条,tbody的,页面的。虽然该方案易实施,但在视觉设计师那里通常是不能忍受的。
使用sticky属性
现在css里有一个position:sticky属性,正好可以实现该需求,我们只需要给thead加上position:sticky即可。关于sticky的浏览器支持可以看这里 http://caniuse.com/#search=st...
这里有一个坑的地方,给thead的position指定sticky,chrome、safari都可以支持,唯独firefox是不行的,也就是写上后没有任何