？
该需求在chrome调试模式下的手机以及oppo安卓手机自带浏览器、ios微信端滑动很流畅，但是在安卓微信端scroll事件有点延迟，怎么办?
源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>FixedHeaderTable Test</title>
<style>
html,body{width:100%;height:100%;font-family: "微软雅黑";font-size:14px;}
*{padding:0;margin:0;}
.forms{width:100%;height:400px;overflow-x:hidden;}
.forms a{color:#2b2b2b;}
table{border-spacing:0px;border-collapse: collapse;border-top:1px solid #e2e2e2;}
.table-wrap{width:100%;}
.table-1-wrapper{float:left;width:100px;}
.table-2-wrapper{overflow:auto;}
table{position:relative;}
table th, table td{width:100px;border-right:1px solid #e2e2e2;text-align:center;}
table tr{height:60px;}
thead{border-top:1px solid #939393;border-bottom:1px solid #939393;}
.table-1 tbody tr{border-top:1px solid #fff;}
table tbody tr:first-child{border-top:1px solid #939393;}
table tbody tr:last-child{border-bottom:1px solid #939393;}
.table-1{background-color:#fff;border-right:1px solid #e2e2e2;border-bottom:1px solid #939393;}
.table-1 tbody tr{height:60px;}
.table-2{border-left:1px solid #e2e2e2;}
.table-2 tbody tr{border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;}
.table-2 th:nth-child(2n+1), .table-2 td:nth-child(2n+1){background-color:#FAFAFA;}
.table-2 th:nth-child(2n), .table-2 td:nth-child(2n){background-color:#fff;}
.thead-fixed{position:fixed;}
.table-1 .thead-fixed{z-index:9;background-color:#fff;border-top:1px solid #939393;border-bottom:1px solid #939393;}
.table-2 .thead-fixed{z-index:1;width:1000px;overflow:auto;}
.table-2 .thead-fixed th{width:100px;}
</style>
<script src="http://www.jq22.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<section class="forms">
<div class="table-wrap">
<div class="table-wrapper table-1-wrapper table-fixed-wrapper">
<table cellspacing="0" width="100" class="table-1" >
<thead class="forms-thead thead-fixed">
<tr>
<th width="100"> </th>
</tr>
</thead>
<tbody >
<tr>
<td rowspan="4"><a>员工A</a></td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
<tbody>
<tr>
<td rowspan="4"><a>员工B</a></td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
<tbody>
<tr>
<td rowspan="4"><a>员工C</a></td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
<tbody>
<tr>
<td rowspan="11"><a>员工D</a></td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
</div>
<div class="table-wrapper table-2-wrapper table-scroll-wrapper">
<table width="1000" class="table-2" id="table1">
<thead class="forms-thead thead-fixed">
<tr>
<th width="100">来源渠道</th>
<th width="100">新增有效</th>
<th width="100">新增客户</th>
<th width="100">电话</th>
<th width="100">见面</th>
<th width="100">合同数</th>
<th width="100">订金金额</th>
<th width="100">合同金额</th>
<th width="100">警告次数</th>
<th width="100">回落次数</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>B</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>C</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>D</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>A</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>B</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>C</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>D</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>A</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>B</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>C</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>D</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>A</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>B</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>C</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>D</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>E</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>F</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>G</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>H</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>H</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>H</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>H</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<script>
$(function(){
//监听滚动条事件，固定表头
var tableFormsTop=$(".forms").offset().top;
//获取div水平滑动的距离
var leftMove=100;
//获取table-2的左移位置
var tableLeft=100;
//监听tabled-scroll左右滚动事件
$(".table-scroll-wrapper").scroll(function () {
var $this=$(this),
scrollHorizontal=$this.scrollLeft();
/* console.log($this);
console.log(scrollHorizontal);*/
if(scrollHorizontal<tableLeft){
leftMove=tableLeft-scrollHorizontal;
}else{
leftMove="-"+(scrollHorizontal-tableLeft);
}
/* console.log(leftMove);*/
//获取固定的table-2的head
$(".table-2 .thead-fixed").animate({
'left':leftMove+"px"
},0);
});
});
</script>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
