思路:实现双向滚动,即:
上下滚动时, 列名不动
左右滚动时, 列名一起左右滚动
必须使用js添加事件,纯css无法实现
关键代码:
html:
<div.wrapper style='overflow:auto'> <!--wrapper必须有overflow属性-->
<div.listHeader style='overflow:visible;position:relative;'></div>
<div.listContent style='overflow:visible'></div>
</div>
js:
$wrapper.scroll( //滚动事件,
function(){
var scrollVal=$wrapper.scrollTop(); //取得wrapper的滚动的上下值
$header.css('top',scrollVal); //将滚动值设置为标题(相对定位)的上侧距离.
}
)
大约性能:在firefox 上,使用鼠标滚轮滚动,每秒触发大约50-100次事件,列表100条数据,滑动没有卡顿现象.i5+8g
