js上下滚动出现卡顿

JavaScript011

js上下滚动出现卡顿,第1张

谷歌浏览器下还是很正常的啊。。没有卡顿的。

不知道你说的卡顿是不是指在滚动到顶端的时候的跳动。。

确实跳了一下。

如果你的p标签没有重置margin、padding的话,可以这么改

if (demo2.offsetHeight - demo.scrollTop  + 16< 0)//当滚动至demo1与demo2交界时 

            demo.scrollTop -= demo1.offsetHeight + 16//demo跳到最顶端

}

16是谷歌浏览器下p标签默认的margin-top的值。

这样就不会有跳动了。

卡顿的问题有两个因素影响了,一个是:向左移动的速度必须为div宽度能整除的数,要不减到最后判断的时候会有余量。二个是:判断的时候已经到了边界了,所以应该执行下一次。修改的例子:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无缝滚动</title>

<style type="text/css"> 

*{margin:0padding:0} 

#div2{width:600pxoverflow:hiddenposition:relativeleft:200px} 

#div1{position:relativeleft:0pxwidth:1200px} 

#div1 li{list-style-type: nonefloat:leftwidth:200pxheight:180px 

img{width:100%height:100%} 

</style> 

<script> 

window.onload=function(){ 

var oUl=document.getElementById('ul1') 

var oDiv=document.getElementById('div1') 

var oBtn=document.getElementById('btn1') 

var t=0

oUl.innerHTML = oUl.innerHTML + oUl.innerHTML

var speed = 20//速度,必须是oUl.offsetWidth能整除的数;

oBtn.onclick=function(){ 

clearInterval(t)

t=setInterval(function(){ 

if(oDiv.offsetLeft <= -oUl.offsetWidth/2){

oDiv.style.left = -speed+'px'//因为判断的时候已经到了边界了,所以应该执行下次

}else{ 

oDiv.style.left = oDiv.offsetLeft - speed+'px' 

}

},50) 

}

}

</script> 

</head> 

<body> 

<input id="btn1" value="开始" type="button"/> 

<div id="div2"> 

    <div id="div1"> 

        <ul id="ul1"> 

            <li><img src="1.jpg"></li> 

            <li><img src="2.jpg"></li> 

            <li><img src="3.jpg"></li> 

        </ul> 

    </div> 

</div> 

</body> 

</html>

这是最古老的js滚动代码了,人家的最初完成dome 是没问题的,估计的看到的是不知道转手多少次的了

问题出在这

demo.scrollTop -= demo1.offsetHeight //demo跳到最顶端

在浏览器中 P有默认margin ; 但margin 高度不计算在 offsetHeight

<style>p{ margin:0px}</style>