<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));
标签：function,防抖,right,节流,top,表头,var,position,left From： https://www.cnblogs.com/liufeiran/p/18291752