前端时间移动端在做表格的时候需要这个功能，由于还有实现类似原生的惯性滚动功能，于是使用了iscroll插件。
iscroll插件下载地址：iscroll5
该功能demo github地址： https://github.com/lyc152/front-special-effects/tree/master/table-fixed
下面看下代码结构：
HTML:
<div class="data-table">
<div class="t_l">
<table>
<tbody>
<tr>
<th>品类</th>
</tr>
</tbody>
</table>
<div class="t_l_freeze" id="t_l_freeze">
<table>
<tr>
<td>品类</td>
</tr>
<tr>
<td>男鞋</td>
</tr>
<tr>
<td>男鞋</td>
</tr>
<tr>
<td>男鞋</td>
</tr>
<tr>
<td>男鞋</td>
</tr>
<tr>
<td>男鞋</td>
</tr>
<tr>
<td>男鞋</td>
</tr>
<tr>
<td>男鞋</td>
</tr>
<tr>
<td>男鞋</td>
</tr>
<tr>
<td>男鞋</td>
</tr>
<tr>
<td>男鞋</td>
</tr>
<tr>
<td>男鞋</td>
</tr>
<tr>
<td>男鞋</td>
</tr>
<tr>
<td>男鞋</td>
</tr>
<tr>
<td>男鞋</td>
</tr>
<tr>
<td>男鞋</td>
</tr>
<tr>
<td>男鞋</td>
</tr>
</table>
</div>
</div>
<div class="t_r">
<div class="t_r_t" id="t_r_t">
<table>
<tbody>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
</tbody>
</table>
</div>
<div class="t_r_content" id="t_r_content">
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
table-fixed
实现表头和首列固定比较简单，可以将可以滚动的content容器的scrollTop和scrollLeft值分别赋值给锁定表列容器的scrollTop和锁定表头的scrollLeft。即：
function aa() {
var a = document.getElementById("t_r_content").scrollTop;
var b = document.getElementById("t_r_content").scrollLeft;
document.getElementById("cl_freeze").scrollTop = a;
document.getElementById("t_r_t").scrollLeft = b;
}
但是实现 惯性滚动 中还要 固定表头和表列就要麻烦些：
var win = $(window),
scrollAreaEl = $('.t_r_content'),
leftFreezeEl = $('.t_l_freeze'),
leftTableEl = leftFreezeEl.find('table'),
rightTableEl = $('.t_r_t table'); //动态计算容器最大高度
function adjustHeight() {
var winHeight = win.height(),
tableHeight = winHeight - 90;
leftFreezeEl.height(tableHeight);
scrollAreaEl.height(tableHeight);
} adjustHeight();
win.on('resize', adjustHeight); //设置iscroll
var myScroll = new IScroll('.t_r_content', {
scrollX: true,
scrollY: true,
probeType: 3
}); //阻止默认滚动
scrollAreaEl.on('touchmove mousewheel', function(e) {
e.preventDefault();
}); //固定上左表头的滚动
myScroll.on('scroll', updatePosition);
myScroll.on('scrollEnd', updatePosition); function updatePosition() {
var a = this.y;
var b = this.x;
leftTableEl.css('transform', 'translate(0px, ' + a + 'px) translateZ(0px)');
rightTableEl.css('transform', 'translate(' + b + 'px, 0px) translateZ(0px)');
}
main.js
实现步骤
1.引用 iscroll-probe.js 插件
2. 动态计算容器的最大高度，当resize的时候重新计算容器的最大高度；
3. 设置iscroll；
4. 阻止可滚动部分content的默认滚动；
5. 阻止上左表头的滚动，需要引用iscroll 中的 scroll，scrollEnd，要阻止表头和表列的滚动 ，就需要计算滚动的x和y值，更新leftTable和rightTable的transform的值就可以做到了。
当然，可以实现这个功能的方法很多，大家有什么比较好的方法我们都可以一起讨论，欢迎拍砖