首页 > 代码库 > ie下滚动时抖动的问题

ie下滚动时抖动的问题

2024-08-04 18:44:27   219人阅读

如果定位父级的内容会随着滚动条变化（也就是父级的位置在变化，子元素不断改变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.onscroll=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> 

ie下滚动时抖动的问题


联系
我们