码迷,mamicode.com
首页 > 其他好文 > 详细

ie下滚动时抖动的问题

时间:2014-11-27 14:14:13      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:style   http   io   ar   os   sp   on   div   问题   

如果定位父级的内容会随着滚动条变化(也就是父级的位置在变化,子元素不断改变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下滚动时抖动的问题

标签:style   http   io   ar   os   sp   on   div   问题   

原文地址:http://www.cnblogs.com/enochjs/p/4126219.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!