滑動固定表格頭和列--js,html,css--移動端--基於Iscroll
阿新 • • 發佈：2019-02-05
簡單實現固定表格頭和列。
之前做了一個表格固定頭和列的，分享一下程式碼和思路。
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-probe.js 版本。可實時偵聽滾動距離。（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, //需要使用 iscroll-probe.js 才能生效 probeType ： 1 滾動不繁忙的時候觸發 probeType ： 2 滾動時每隔一定時間觸發 probeType ： 3 每滾動一畫素觸發一次
mouseWheel: true, //是否監聽滑鼠滾輪事件。
scrollX: true,
scrollY: true,
// momentum: false,
snap: false, //自動分割容器，用於製作走馬燈效果等。Options.snap: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 //是否啟用彈力動畫效果，關掉可以加速
});
myScroll1.on('scroll', updatePosition);
myScroll1.on('scrollEnd', updatePosition);
myScroll1.on('beforeScrollStart', ISrefresh);
//IScroll滾動條，上左固定，需要的使用
function init_IScroll() {
var ISwrapper = $("#ISwrapper");
myScroll1.scrollTo(0, 0);
myScroll1.refresh();
ISwrapper.find(".lockrow").css({
"top": "0px"
});
ISwrapper.find(".lockcol").css({
"left": "0px"
});
}
//重新整理IScroll，需要的使用
function ISrefresh() {
this.refresh()
}
//IScroll 滾動時處理
function updatePosition() {
var ISwrapper = $("#ISwrapper");
//需要的使用
//
//外層 <span style="font-family: Arial, Helvetica, sans-serif;">.container </span>加個超出滾動overfow：scroll
//外層滾動到一定距離開始滾動
// var parent_container = ISwrapper.parents(".container");
// var baseScTop = 130;
// if (this.directionX == 0 && this.directionY < 0 && this.y >= 0) {
// parent_container.scrollTop(0);
// } else if (this.directionX == 0 && this.directionY > 0 && this.y <= 0) {
// parent_container.scrollTop(baseScTop);
// } else if (this.directionX == 0 && this.directionY == 0 && this.y == 0) { //列表少時>container高度，滑動不了
// if (this.distY > 0) {
// parent_container.scrollTop(0);
// } else {
// parent_container.scrollTop(baseScTop);
// }
// }
ISwrapper.find(".lockrow").css({
"top": -1 * this.y + "px"
});
ISwrapper.find(".lockcol").css({
"left": -1 * this.x + "px"
});
}<div id="ISwrapper">
<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>
謝謝，我的第一篇部落格，寫的不好，多多指正，有更好的方法可以留言。