scroll事件在微信安卓端的研究
2016-12-07 11:35
375 查看
？
该需求在chrome调试模式下的手机以及oppo安卓手机自带浏览器、ios微信端滑动很流畅，但是在安卓微信端scroll事件有点延迟，怎么办?
源码如下：
该需求在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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 解决微信小程序组件scroll-view中bindscrolltolower事件触发不了的问题
- 微信公众帐号开发教程第14篇-自定义菜单的创建及菜单事件响应 （Java版）
- 微信：一个必须研究的产品
- JS滚轮事件(mousewheel/DOMMouseScroll)了解
- scrollTop与offsetTop研究 兼容IE8
- 接收微信服务器推送事件获取openID
- [案例研究]—superJumper 2.界面与触屏事件
- 微信小程序 循环列表添加点击事件和样式
- 微信经典飞机大战之五：触摸事件及其优先级
- 微信开发 事件 trim subscribe
- Android中的事件处理研究
- 微信小程序 事件冒泡（十二）
- 微信小程序 scroll-view隐藏滚动条详解
- Android中Touch事件分析--解决HorizontalScrollView滑动和按钮事件触发问题
- as3.0 EventDispatcher 事件派发和碰撞的例子.大家可以研究研究.
- 微信那蛋疼的事件消息
- file域onchange事件的一些研究
- 很多人都不知道的监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
- ASP.NET实现微信功能（1）（创建菜单，验证，给菜单添加事件）