<style> #SetLimitAdd td{ line-height: 20px; padding-top: 5px; padding-bottom: 5px; } #wrapper{} .container-fluid{ width:1747px;/*實際顯示區域*/ overflow-x: auto; padding-right: auto; padding-left: auto; margin-right: auto; margin-left: auto; } #right_div{float: left;} #right_div1{width: 100%;overflow: hidden;} #right_divx{width: 2200px;}/*表格真實寬度*/ #right_div2{ /*margin-top:-20px;*/ width:100%; height:500px; overflow-y: auto; overflow-x: hidden;/*內部不顯示捲軸*/ } #right_table1{width: 2200px;background-color: #ededed;border-bottom:1px solid #cccccc;} #right_table1 td{padding-top: 5px;padding-bottom: 5px;} #SetLimitAdd{ /**width和max-width一起寫，手機瀏覽器開啟也能固定長度**/ width: 2200px;/*表格真實寬度*/ max-width: 2200px;/*表格真實寬度*/ /*white-space:nowrap;*/ } </style> <div class="basic_table" style="width: 98%; margin: 0 auto;"> <div class="container-fluid" id="wrapper"> <div id="right_div"> <div id="right_div1"> <div id="right_divx"> <table id="right_table1" class="basic_table_tit"> <tbody> <tr> <td style="width:50px;"><input type="checkbox" id="SetPriceInstallCheckAll" style="width:16px;height:16px;" onclick="CheckBoxGroup(this, 'SetPriceInstallCheckOne')" /></td> <td style="width:150px;">配件編碼</td> <td style="width:150px;">配件名稱</td> <td style="width:150px;">原廠編碼</td> <td style="width:110px;">規格</td> <td style="width:70px;">單位</td> <td style="width:110px;">批次</td> <td style="width:110px;">銷售價格</td> <td style="width:110px;">A價格</td> <td style="width:110px;">B價格</td> <td style="width:110px;">C價格</td> <td style="width:110px;">成本價</td> <td style="width:110px;">採購訂單價</td> <td style="width:110px;">原限價</td> <td style="width:110px;">新限價</td> <td style="width:110px;">加價率</td> <td style="width:110px;">倉庫</td> <td style="width:110px;">子庫</td> <td style="width:80px;">凍結狀態</td> <td style="width:auto;border-right:none;">銷售頻次</td> </tr> </tbody> </table> </div> </div> <div id="right_div2"> <table class="wgw_downtab basic_table_con basic_table_bottom" id="SetLimitAdd"> <tbody class="basic_table_con basic_table_bottom" id="SetLimitAddList"></tbody> </table> </div> </div> </div> </div>
$(function () {//固定和滾動 var right_div2 = document.getElementById("right_div2"); right_div2.onscroll = function(){ var right_div2_left = this.scrollLeft; document.getElementById("right_div1").scrollLeft = right_div2_left; } //設定右邊div寬度 document.getElementById("right_div").style.width="2200px"//表格真實寬度""+document.documentElement.clientWidth-500+"px"; setInterval(function() { document.getElementById("right_div").style.width="2200px"//表格真實寬度""+document.documentElement.clientWidth-500+"px"; }, 0);
//直接給滾動綁事件會頻繁觸發 // $("#wrapper").scroll(function () {//給table外面的div滾動事件繫結一個函式 // console.log('efg') // var left = $("#wrapper").scrollLeft();//獲取滾動的距離 // var trs = $("#wrapper table tr");//獲取表格的所有tr // trs.each(function (i) {//對每一個tr（每一行）進行處理 // //獲得每一行下面的所有的td，然後選中下標為0的，即第一列，設定position為相對定位 // //相對於父div左邊的距離為滑動的距離，然後設定個背景顏色，覆蓋住後面幾列資料滑動到第一列下面的情況 // //如果有必要也可以設定一個z-index屬性 // if(i == 0){ // $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#ededed" }); // }else{ // if ((i+1) % 2 == 0) { // $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#ffffff" }); // }else{ // $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#eefcff" }); // } // } // // }); // }); }) //用防抖就行 function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; var myEfficientFn = debounce(function() { console.log('防抖') var left = $("#wrapper").scrollLeft();//獲取滾動的距離 var trs = $("#wrapper table tr");//獲取表格的所有tr trs.each(function (i) {//對每一個tr（每一行）進行處理 //獲得每一行下面的所有的td，然後選中下標為0的，即第一列，設定position為相對定位 //相對於父div左邊的距離為滑動的距離，然後設定個背景顏色，覆蓋住後面幾列資料滑動到第一列下面的情況 //如果有必要也可以設定一個z-index屬性 if(i == 0){ $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#ededed" });//表頭全選的input }else{ if ((i+1) % 2 == 0) { $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#ffffff" });//白底 }else{ $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#eefcff" });//藍底 } } }); }, 100); // 繫結監聽 $("#wrapper")[0].addEventListener('scroll', myEfficientFn); //節流的用法 function throttle(func, wait, mustRun) { var timeout, startTime = new Date(); return function() { var context = this, args = arguments, curTime = new Date(); clearTimeout(timeout); // 如果達到了規定的觸發時間間隔，觸發 handler if(curTime - startTime >= mustRun){ func.apply(context,args); startTime = curTime; // 沒達到觸發間隔，重新設定定時器 }else{ timeout = setTimeout(func, wait); } }; }; // 實際想繫結在 scroll 事件上的 handler function realFunc(){ console.log('節流') var left = $("#wrapper").scrollLeft();//獲取滾動的距離 var trs = $("#wrapper table tr");//獲取表格的所有tr trs.each(function (i) {//對每一個tr（每一行）進行處理 //獲得每一行下面的所有的td，然後選中下標為0的，即第一列，設定position為相對定位 //相對於父div左邊的距離為滑動的距離，然後設定個背景顏色，覆蓋住後面幾列資料滑動到第一列下面的情況 //如果有必要也可以設定一個z-index屬性 if(i == 0){ $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#ededed" }); }else{ if ((i+1) % 2 == 0) { $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#ffffff" }); }else{ $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left,"background-color": "#eefcff" }); } } }); } // 採用了節流函式 // $("#wrapper")[0].addEventListener('scroll',throttle(realFunc,100,200));