一、需求
要求同时固定表头和操作栏，方便用户操作。
效果
二、实现思路
- js控制表格宽高自适应，溢出滚动
- 表头、操作栏独立放置，表头横向溢出滚动，纵向溢出隐藏，操作栏纵向溢出滚动，横向溢出隐藏
- 表格滚动时同步滚动表头和操作栏
三、布局
布局
四、实现过程
1. 传统方法监听滚动并实现同步滚动（这是最容易想到，也是网上最常见的同步滚动实现方法）
$(".page-table-body-scroll").scroll(function (event) {
event.preventDefault();
//表头跟随表格同步横向滚动
$(".page-table-header-scroll").scrollLeft($(".page-table-body-scroll").scrollLeft());
//操作栏跟随表格同步纵向滚动
$(".page-table-fixed-scroll").scrollTop($(".page-table-body-scroll").scrollTop());
});
$(".page-table-header-scroll").scroll(function (event) {
event.preventDefault();
//表格跟随表头同步横向滚动
$(".page-table-body-scroll").scrollLeft($(".page-table-header-scroll").scrollLeft());
});
$(".page-table-fixed-scroll").scroll(function (event) {
event.preventDefault();
//表格跟随操作栏同步纵向滚动
$(".page-table-body-scroll").scrollTop($(".page-table-fixed-scroll").scrollTop());
});
问题：
这种方法在使用鼠标拖动滚动条和滚轮滚动时都没有问题可以实现平滑同步，但在macbook下使用触摸板则遇到了错位问题。
mac下触摸板错位
问题分析：
经调试，当去掉表格跟随表头或操作栏同步滚动时，不再出现错位现象。考虑可能是跟代码反复互相调用scroll事件有关。
重复调用
解决思路：
- 区分表格横向纵向滚动，减少冗余
- 通过鼠标滑过事件判断当前滚动区域触发是否为用户主动触发，鼠标滑过当前区域时，认为当前区域滚动事件为主动触发。如果是被动触发（即跟随滚动）则不再反向触发滚动。
2. 改进方法
//三个区域默认加上禁止触发滚动样式【disScroll】，以鼠标滑过判定当前所在区域为用户主动触发移除【disScroll】
$(".page-table-body-scroll,.page-table-fixed-scroll,.page-table-header-scroll").hover(function () {
$(this).removeClass("disScroll");
},function () {
$(this).addClass("disScroll");
});
$(".page-table-body-scroll,.page-table-fixed-scroll,.page-table-header-scroll").each(function(){
//记录scrollLeft,scrollTop初始值
$(this).data('slt',{sl:this.scrollLeft,st:this.scrollTop});
}).scroll(function (event) {
event.preventDefault();
var sl=this.scrollLeft,
st=this.scrollTop,
d=$(this).data('slt');
//判断横向滚动
if(sl!=d.sl){
//判断当前滚动区域是否为主动触发，只有当主动触发时才进行对应区域的滚动事件触发
if($(this).hasClass("page-table-body-scroll")&&!$(this).hasClass("disScroll")) {
$(".page-table-header-scroll").scrollLeft($(this).scrollLeft());
}else if($(this).hasClass("page-table-header-scroll")&&!$(this).hasClass("disScroll")) {
$(".page-table-body-scroll").scrollLeft($(this).scrollLeft());
}
}
//判断纵向滚动
if(st!=d.st){
if($(this).hasClass("page-table-body-scroll")&&!$(this).hasClass("disScroll")){
$(".page-table-fixed-scroll").scrollTop($(this).scrollTop());
}else if($(this).hasClass("page-table-fixed-scroll")&&!$(this).hasClass("disScroll")){
$(".page-table-body-scroll").scrollTop($(this).scrollTop());
}
}
$(this).data('slt',{sl:sl,st:st});
});
问题：
当用户进入页面，未移动鼠标时，直接滚动无法触发hover事件。
解决思路：
当用户进入页面未移动鼠标时，三个区域都有【disScroll】，可通过判断【disScroll】数量对此情况单独处理。
//单独处理进入页面直接滚动的情况
if($(".disScroll").length==3){
$(this).removeClass("disScroll");
}
三、总结
至此，需求中遇到的问题全部解决（demo中表格是宽高自适应的，因此还涉及函数节流，网上此类分享文章很多，这里就不赘述）。
这是我第一次尝试写技术分享类文章，其实个人觉得自己的技术还达不到分享的水平，这里只当是记录和对自己的鼓舞。以前在网上也看了很多技术分享文，但当自己真正开始去写的时候才知道要写出一篇透彻的文章是多么不容易。在写这篇文章的过程中，也发现自己的诸多不足，文中如有错漏之处，还请多多批评指正，希望这是一个好的开始，重新出发，终身学习。😊
网友评论