js 表格/列表 标题/列名不动,内容独立双向滚动

思路:实现双向滚动,即:

上下滚动时, 列名不动

左右滚动时, 列名一起左右滚动

    必须使用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