滑动固定表格头和列--js,html,css--移动端--基于Iscroll

时间：2025-02-06 11:32:59

简单实现固定表格头和列。

之前做了一个表格固定头和列的，分享一下代码和思路。

1.滑动仅固定头或列  

2.滑动即可固定头，也可固定列。（滑动固定其他地方也可参考。）

1. 仅固定列，或头。

用定位，但需注意，固定列和表格内容宽或高匹配。

代码：

<style type="text/css">
/*（我用的单位是%，根据实际用你的单位）*/
.tableCon {
    position: relative;
    width: 100%;
}

.tableCon .tableFix {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 22%;
}

.tableCon .tableScr {
    margin-left: 22%;
    width: 78%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    /*滚动平滑*/
}
</style>

<!-- .tableFix .tableScr 高度要一致 -->
<div class="tableCon">
    <div class="tableFix">
        <table>
            <thead>
                <tr>
                    <th>标题1</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>固定1</th>
                </tr>
                <tr>
                    <th>固定1</th>
                </tr>
                
            </tbody>
        </table>
    </div>
    <div class="tableScr">
        <table>
            <thead>
                <tr>
                    <th>标题2</th>
                    <th>标题3</th>
                    <th>标题4</th>
                    <th>标题5</th>
                    <th>标题6</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>滑动内容1</th>
                    <th>滑动内容2</th>
                    <th>滑动内容3</th>
                    <th>滑动内容4</th>
                    <th>滑动内容5</th>
                    <th>滑动内容6</th>
                </tr>
                <tr>
                    <th>滑动内容1</th>
                    <th>滑动内容2</th>
                    <th>滑动内容3</th>
                    <th>滑动内容4</th>
                    <th>滑动内容5</th>
                    <th>滑动内容6</th>
                </tr>
            </tbody>
        </table>
    </div>
</div>
仅固定头类似，不再列举。

2. 既固定头，也固定列。

用iscroll（侦听不了移动端时时滚动距离，有延迟，固定会抖动，所以用iscroll）。

关键  position:relative

引用iscroll 的  版本。可实时侦听滚动距离。（iscroll版本区别，查看相关iscroll文档）


没有封装，需要的可以自己封装。这里仅提供简单方法和思路。

代码：

/*固定头和列的样式，加背景，不然背景透明文字重叠*/
.lockrow {
    background-color: #e4e6f7;
    position: relative;
    z-index: 2;
}
.lockcol {
    background-color: #e4e6f7;
    position: relative;
    z-index: 1;
}

.lockcross {
    z-index: 3;
}

var myScroll1 = new IScroll("#ISwrapper", {
    // preventDefault:false,
    probeType: 3, //需要使用  才能生效 probeType ： 1 滚动不繁忙的时候触发 probeType ： 2 滚动时每隔一定时间触发 probeType ： 3   每滚动一像素触发一次
    mouseWheel: true, //是否监听鼠标滚轮事件。
    scrollX: true,
    scrollY: true,
    // momentum: false,
    snap: false, //自动分割容器，用于制作走马灯效果等。:true// 根据容器尺寸自动分割
    //snapSpeed: 400,
    scrollbars: false, //是否显示默认滚动条
    freeScroll: false, //主要在上下左右滚动都生效时使用，可以向任意方向滚动。
    deceleration: 0.0001, //滚动动量减速越大越快，建议不大于 0.01,默认:0.0006
    disableMouse: true, //是否关闭鼠标事件探测。如知道运行在哪个平台，可以开启它来加速。
    disablePointer: true, //是否关闭指针事件探测。如知道运行在哪个平台，可以开启它来加速。
    disableTouch: false, //是否关闭触摸事件探测。如知道运行在哪个平台，可以开启它来加速。
    eventPassthrough: false, //使用 IScroll 的横轴滚动时，如想使用系统立轴滚动并在横轴上生效，请开启。
    bounce: false //是否启用弹力动画效果，关掉可以加速
});
('scroll', updatePosition);
('scrollEnd', updatePosition);
('beforeScrollStart', ISrefresh);

//IScroll滚动条，上左固定，需要的使用
function init_IScroll() {
    var ISwrapper = $("#ISwrapper");
    (0, 0);
    ();
    (".lockrow").css({
        "top": "0px"
    });
    (".lockcol").css({
        "left": "0px"
    });
}

//刷新IScroll，需要的使用
function ISrefresh() {
    ()
}
//IScroll 滚动时处理
function updatePosition() {
    var ISwrapper = $("#ISwrapper");

    //需要的使用
    //
    //外层 <span style="font-family: Arial, Helvetica, sans-serif;">.container </span>加个超出滚动overfow：scroll
    //外层滚动到一定距离开始滚动
	// var parent_container = (".container");
	// var baseScTop = 130;
	// if ( == 0 &&  < 0 &&  >= 0) {
	//     parent_container.scrollTop(0);
	// } else if ( == 0 &&  > 0 &&  <= 0) {
	//     parent_container.scrollTop(baseScTop);
	// } else if ( == 0 &&  == 0 &&  == 0) { //列表少时>container高度，滑动不了
	//     if ( > 0) {
	//         parent_container.scrollTop(0);
	//     } else {
	//         parent_container.scrollTop(baseScTop);
	//     }
	// }

    (".lockrow").css({
        "top": -1 *  + "px"
    });
    (".lockcol").css({
        "left": -1 *  + "px"
    });
}

<div >
    <div class="tableCon" style="width: 800px; height: 800px;">
        <table class="table1 IStable">
            <colgroup>
                <col width="200" />
                <col width="200" />
                <col width="200" />
                <col width="200" />
            </colgroup>
            <thead>
                <tr>
                    <th class="lockrow lockcol lockcross">固定头列</th>
                    <th class="lockrow">固定头</th>
                    <th class="lockrow">固定头</th>
                    <th class="lockrow">固定头</th>
                    <th class="lockrow">固定头</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="lockcol">固定列</td><td>内容</td><td>内容</td><td>内容</td>
                </tr>
                <tr>
                    <td class="lockcol">固定列</td><td>内容</td><td>内容</td><td>内容</td>
                </tr>
                <tr>
                    <td class="lockcol">固定列</td><td>内容</td><td>内容</td><td>内容</td>
                </tr>
                <tr>
                    <td class="lockcol">固定列</td><td>内容</td><td>内容</td><td>内容</td>
                </tr>
                <tr>
                    <td class="lockcol">固定列</td><td>内容</td><td>内容</td><td>内容</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

谢谢，我的第一篇博客，写的不好，多多指正，有更好的方法可以留言。

相关文章