如果定位父级的内容会随着滚动条变化（也就是父级的位置在变化，子元素不断改变position时，ie下会出现抖动，原因我觉得是因为定位时要先找父元素位置，根据父元素位置进行定位，导致延迟比较明显，出现抖动。）
如下面的例子，div宽度100%；内容ul宽度10000px超出了div的宽度出现滚动条。当拖动div的滚动条时，对ul进行定位就会出现抖动。
解决方法在外面在套一层div，设置这一层为定位父元素。宽高定死。设置overflow：hidden；
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,ul,li,table,td,tr,div,thead,tbody{ margin:0; padding:0;}
li{ list-style:none;}
.table_div{width:100%; height:300px; overflow:auto; margin:5px; background:#ccc; position:relative; background:red;}
#left_tit{ width:10000px; position:absolute; left:0;top:0;}
#left_tit li{ width:130px; height:30px;border:1px solid #000;}
#fixed_li{ background:red; position:absolute; left:0; top:0;}
#tbody{ padding-top:30px;}
</style>
</head>
<body>
<div class="table_div" id="table_div">
<ul class="left_tit" id="left_tit">
<li id="fixed_li"></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
</div>
<script>
var width_l=130;
var height_l=15;
var left_tit_height=248;
function set_table(width_l,height_l,left_tit_height){
var left_tit=document.getElementById("left_tit");
var table_div=document.getElementById("table_div");
table_div.οnscrοll=function(){
var scrollTop = table_div.scrollTop;
var scrollLeft = table_div.scrollLeft;
console.log(scrollTop+" "+scrollLeft)
left_tit.style.left=scrollLeft+"px";
}
}
set_table(width_l,height_l,left_tit_height);
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,ul,li,table,td,tr,div,thead,tbody{ margin:0; padding:0;}
li{ list-style:none;}
.table_div{width:100%; height:300px; overflow:auto; margin:5px; background:#ccc; position:relative; background:red;}
#left_tit{ width:10000px; position:absolute; left:0;top:0;}
#left_tit li{ width:130px; height:30px;border:1px solid #000;}
#fixed_li{ background:red; position:absolute; left:0; top:0;}
#tbody{ padding-top:30px;}
</style>
</head>
<body>
<div class="table_div" id="table_div">
<ul class="left_tit" id="left_tit">
<li id="fixed_li"></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
</div>
<script>
var width_l=130;
var height_l=15;
var left_tit_height=248;
function set_table(width_l,height_l,left_tit_height){
var left_tit=document.getElementById("left_tit");
var table_div=document.getElementById("table_div");
table_div.οnscrοll=function(){
var scrollTop = table_div.scrollTop;
var scrollLeft = table_div.scrollLeft;
console.log(scrollTop+" "+scrollLeft)
left_tit.style.left=scrollLeft+"px";
}
}
set_table(width_l,height_l,left_tit_height);
</script>
</body>
</html>
1638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
