项目中开发固定表头和首列的表格【付代码】

前言
前段时间做移动端的项目，项目中需要一个固定表头和首列的表格，但由于是移动端的，组件库里没有类似的，于是，就去网上找看有没有类似的，结果越找越气，10个文章9个抄，抄也行，你倒是抄个能用的啊，一篇根本就不能用的文章，抄个什么劲？有意义？？？
没办法，只有自己写一个了。

实现思路
1、首先分为四部分，左上角固定不动的表头，表头部分，首列部分，表格主体部分
2、整个表格添加定位position: relative；左上角表头添加position: fixed;
3、给白色主体部分添加滚动监听事件，在滑动的同时，使首列的scrollLeft等于主体部分的scrollLeft值；使表头的scrollTop值等于主体的scrollTop值；

2021-06-03 最近又对这个表格优化了下，以上操作是第一版，本版本优化了向左滚动同时也可以向上滚动的问题，体验不好；要求是向左右滚动则不允许上下滚动，向上下滚动不允许左右滚动；
思路是如下：
1、通过touchstart记录初始的鼠标点击位置；
2、通过touchmove记录移动时鼠标位置；
3、通过位置的x轴和y轴的差值判断用户手指移动位置；
4、左右滑动时，把盒子的overflowY设为hidden；上下滑动时，把盒子得overflowX设为hidden；

总结

以上就是今日分享的全部内容。希望能对大家的学习有所帮助，小伙伴们评论区留下“管用"，记得三联哦。 还有更多知识分享，欢迎拜访链接: 首页